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