Device Mode でのモバイル端末のシミュレート

Chrome DevTools の Device Mode を使用して、モバイル ファーストの非常にレスポンシブなウェブサイトを構築します。ここでは、Device Mode を使用してさまざまな端末やその機能をシミュレートする方法について説明します。

警告:Device Mode では、モバイル端末でサイトがどのように見えるか、実際に近い見た目で確認できますが、全体像を把握するには、常に実際の端末を使ってテストする必要があります。 たとえば、DevTools ではモバイル端末のパフォーマンス特性はエミュレートできません。

要約

Device Mode の切り替え

[Device Mode] ボタンで Device Mode をオンまたはオフに切り替えます。

Device Mode を最初に開始

Device Mode がオンのときは、アイコンは青色です(Device Mode オン)。

そしてオフのときは、アイコンは灰色です(Device Mode オフ)。

Device Mode はデフォルトでは有効になっています。

また、Command+Shift+M(Mac)または Ctrl+Shift+M(Windows、Linux)を押して Device Mode を切り替えることもできます。このショートカットを使用するには、マウスのフォーカスが DevTools ウィンドウにある必要があります。フォーカスがビューポートにある場合は、Chrome のユーザー切り替えショートカットがトリガーされます。