見ているのはパソコンの画面だけ

アクセスの大半がスマホなのに、確認はいつもパソコン。このずれが、公開後の「スマホで見たら崩れていた」を生みます。DevTools の左上にあるスマホとタブレットのアイコンを押せば、その場で切り替えられます。

端末を選ぶより幅を動かす

iPhone などの端末名を選べますが、実は Responsive を選んで幅を少しずつ狭めていく方が実用的です。レイアウトが崩れる瞬間の幅が分かるので、「375px 以下で見出しが 2 行になる」という具体的な報告にできます。

これで十分なこと、そうでないこと

文字の折り返しやボタンのはみ出しなら、この機能で十分確認できます。一方で、指での操作感や実機のフォントの差、カメラや位置情報の挙動は再現されません。あくまで「見た目の一次確認」と割り切って、最終確認は実機で行ってください。

スクリーンショットも撮れる

デバイスモードの状態で、ページ全体のスクリーンショットを保存できます。報告や資料にそのまま使えるので、覚えておくと便利です。

• 実機なしで画面幅を切り替える
• 崩れは幅を狭めていくと見つかる
• 実機確認が必要な場面