Muni Bus

パソコンの操作方法や設定方法を忘れないようにメモしています。ブログを一回引っ越ししているので、所々表示がかなり乱れています・・・

【Chrome】パソコンでスマホ用のウェブページを確認する

Chromeデベロッパーツールを使う。以下の例ではYahoo! JAPANのページを例にして説明する。

Chromeで当該ページを開く。

F12キーを押す。開いていたページは左側に表示され、右側にはボタンがたくさん付いたパネルが表示される。そのパネルの「Switch Devtools to Japanese」をクリック。表示が日本語に切り替わる。

トグルデバイスツールバーアイコン(下図の赤丸のアイコン)をクリックする。左側のページの表示が変わる。この時点で、スマホ用としてページが開かれている。

上部の「サイズ:レスポンシブ」をクリック。ここで、適当なスマホを選択すると、その環境を再現してページを再表示する。

ここで、「F5」を押す。スマホ環境で再表示を行ったことになるため、スマホ用のページが自動的に開かれるはず(https://m.yahoo.co.jp/)。

あとは、いろいろ試せばよい。