自分が使用しているモニター以外でサイトを見た時、どのように表示されるかも検証ツールでチェックすることが出来ます。
表示サイズを変更する
選択ツールの横にある、スマホのような形のアイコンを使います。
クリックしてみましょう。
Webページを表示している部分の見え方が、少し変わります。
下図の場合はiPhone6/7/8で見た時のプレビューです。
サイズ：の横にある▼をクリックすると、ポピュラーなスマホやタブレットの機種名が出てきます。
選択肢から別のものを選べば、その端末のサイズに表示を切り替えてくれます。
スタイルパネルでは、その要素に指定されているCSSが確認できます。
レスポンシブサイトの場合は、ベースのスタイル指定・メディアクエリで上書きしているスタイル指定が表示されます。
この機能を使って、スマホやタブレットで見ても問題ないかを確認します。
- レイアウトは崩れていないか
- 要素がはみ出して、変な横スクロールは出ていないか
- ページの見やすさは維持されているか
問題のある個所があれば、画面上で修正を試しても良いですね。
検証ツールのスマホ/タブレットモードの注意点
検証ツールのスマホ/タブレットモードは、端末の環境を完全に再現したものではありません。
時々、スマホのブラウザでは対応していないCSSプロパティもあるので、最後は実機で見るのが一番確実です。