Posted at

Chromeで画面レイアウトの確認

More than 1 year has passed since last update.


モバイル・パソコンの表示を確認したい!

レスポンシブWebページ、HTTPヘッダーでHTMLを切り分けているなど、状況は様々ですが、画面のレイアウトを確認したいときってよくありますよね。特に、iPhoneやタブレットのモバイル端末からのWeb閲覧が増加しているので、両方に対応できるBootstrapを使ったレスポンシブデザインは多いのではないでしょうか。

いざ、Webに公開したページでも、モバイル端末からだとボタンが重なっていたり、パソコンからだと余白だらけだと、デザインとしてイマイチですよね。なので、事前に確認しておこう!というのが今回の記事です。

Chromeの機能で簡単に出来たのでメモ書き程度に


レイアウトの確認

今回はMac上でChromeを使用した例で説明します。画像と違う点があるかもしれません。


表示方法


  1. 右クリック「検証をクリック」



  2. 「スマホ」みたいなマークをクリック

    もしくはショートカットキー(Command + Shift + M)



  3. スマホの端末の選択(iPhoneやNexus)や画面の回転などの操作ができる




モバイル画面の利便性

モバイル画面のモードでは、通信ヘッダもモバイル端末のものになるので、HTMLの切り替えが行われているかも確認できる。1枚のHTMLだけであれば、あまり関係ないことかもしれないけど・・・