Chromeのモバイルエミュレータは「デバイスモード」と呼ばれ、Chrome DevToolsに組み込まれています。DevToolsを開き、WindowsとLinuxではCtrl + Shift + M、MacではCmd + Shift + Mを押して、Dimensionsメニューから機種を選び、ページを再読み込みします。すると、その機種のビューポート、ピクセル比、ユーザーエージェントでページが表示されます。
このガイドでは、日々のスマホ表示確認に必要な設定をひととおり説明し、最後にデバイスモードでは確認できないことをまとめます。
Chromeでデバイスモードを開く方法
- 確認したいページを開きます。
- DevToolsを開きます。
F12、Ctrl + Shift + I（Windows、Linux）またはCmd + Option + I（Mac）を押すか、ページを右クリックして検証を選びます。 - DevTools左上のToggle device toolbarアイコン（スマホとタブレットの形）をクリックするか、DevToolsにフォーカスがある状態で上記のショートカットを押します。
- 最初のリクエストからモバイルのユーザーエージェントが送られるよう、ページを再読み込みします。
見落とされやすいのが4番目の手順です。再読み込みしないと、サーバー側で端末を判定するサイトはすでにPC用のHTMLを返しています。
機種またはカスタムサイズを選ぶ
ビューポート上部のDimensionsメニューには2つのモードがあります。
Responsiveでは、ビューポートの端をドラッグするか、幅と高さを入力できます。レイアウトが崩れる正確な幅を探すときに使います。ビューポート上のバーには、Mobile S 320、Mobile M 375、Mobile L 425、Tablet 768、Laptop 1024といった幅のショートカットがあります。
iPhoneやPixelなど特定の機種を選ぶと、幅、高さ、デバイスピクセル比、ユーザーエージェントがまとめて設定されます。初期状態のリストは短めです。リスト下部のEditからほかの機種を有効にするか、Add custom deviceで名前、幅、高さ、ピクセル比、ユーザーエージェント文字列を指定して独自の端末を追加できます。確認したい機種がChromeのリストより新しい場合に便利です。最新iPhoneの値はiPhoneの画面サイズとビューポート一覧にまとめています。
回転アイコンで縦向きと横向きを切り替えられます。
遅いスマホを再現する：通信とCPUの制限
PCは一般的なスマホより何倍も高速です。デバイスモードではその差をある程度縮められます。
- デバイスツールバーのThrottlingメニューには、ミドルレンジやローエンドのスマホを想定したプリセットがあり、通信とCPUの両方を遅くします。
- Performanceパネルでは、CPUの速度低下（4倍や6倍など）を個別に設定できます。
- Networkパネルでは、Fast 4G、Slow 4G、3Gなどの通信プリセットを選べます。
スロットリングはあくまでシミュレーションで、実機での計測ではありません。2秒間描画を止めるスクリプトのような、明らかな問題を見つけるのに使いましょう。報告に使える数値が必要なら、モバイルの表示速度テストのガイドとLighthouseのモバイル監査を参考にしてください。
タッチ、センサー、その他のエミュレーション設定
モバイル端末を選ぶと、Chromeはマウスイベントの代わりにタッチイベントを発生させ、カーソルは円形になります。スワイプ式のカルーセルやタップ処理をおおまかに確認できますが、マウスの動きは親指の動きとは異なります。
デバイスツールバーの3点メニューには追加のオプションがあります。Show media queriesはブレイクポイントを色付きのバーで表示し、Show rulersはピクセル単位の定規を追加します。Add device pixel ratioとAdd device typeを選ぶと、それらの設定がツールバーに表示されます。Sensorsパネル（コマンドメニューCtrl + Shift + PまたはCmd + Shift + Pから開く）では、位置情報や端末の向きを上書きできます。
デバイスモードでスマホのスクリーンショットを撮る
デバイスツールバーの3点メニューを開き、表示範囲ならCapture screenshot、ページ全体ならCapture full size screenshotを選びます。特定の機種を選んでいる場合は、先にShow device frameをオンにするとスマホの外枠も含めて撮影できます。ほかの方法との比較はPCでWebサイトのスマホ表示をスクリーンショットする方法をご覧ください。
デバイスモードで確認できないこと
デバイスモードはlocalhostでも使えます。同じローカルサーバーを実機のスマホで確認する方法はlocalhostをスマホで確認する方法で解説しています。
Chromeの公式ドキュメントでも、デバイスモードは「一次近似」と説明されています。制約は次のとおりです。
| 項目 | デバイスモードでできること | できないこと |
|---|---|---|
| レンダリングエンジン | PC版Chrome（Blink）を使用 | SafariやiOS固有の不具合の再現 |
| パフォーマンス | CPUと通信の遅さをシミュレート | 実機の発熱、メモリ、GPUの制約の再現 |
| 入力 | マウス操作をタッチイベントに変換 | 複数指のジェスチャー、親指の届く範囲、画面キーボードの挙動の再現 |
| ブラウザのUI | ページ領域を表示 | iOSやAndroidの実際のアドレスバー、ツールバー、セーフエリアの表示 |
Safariの確認にはXcodeのシミュレーターか実機のiPhoneを使います（解説）。実機AndroidのChromeを確認するには、スマホを接続してPCでchrome://inspectを開きます（解説）。
デバイスモードとスマホ表示の拡張機能、どちらを使う？
デバッグ中はデバイスモードが最適です。Elements、Console、Networkの各パネルがプレビューのすぐ横にあるからです（各パネルはChromeデベロッパーツールの使い方で紹介しています）。ただし見た目をさっと確認するだけなら手間が多く、DevToolsを開いておく必要があるうえ、エミュレーションはタブごとにリセットされます。
Mobile View Extensionなら、DevToolsを開かずにワンクリックで見た目を確認できます。端末のユーザーエージェント、画面サイズ、ピクセル比を適用し、スマホのフレームを表示し、ページを移動しても有効なままです。タッチイベントは発生しないため、タッチ操作の確認には引き続きデバイスモードを使います。それぞれの長所と短所はスマホシミュレーター拡張機能とDevToolsの比較にまとめています。
よくある質問
Chromeのモバイルエミュレータのショートカットは？
DevToolsを開いてフォーカスがある状態で、WindowsとLinuxではCtrl + Shift + M、macOSではCmd + Shift + Mを押します。
デバイスモードにしてもPC版の表示のままなのはなぜ？
機種を選んだあとにページを再読み込みしてください。サイトによっては、エミュレート用のユーザーエージェントが設定される前の最初のリクエストで、どのバージョンを返すかを決めています。
ChromeでiPhoneをエミュレートできますか？
iPhoneの画面サイズ、ピクセル比、ユーザーエージェントはエミュレートできます。ただしページを描画するのはSafariのWebKitではなくChromeのエンジンなので、Safari特有の不具合は再現されません。