このページは Cloud Translation API によって翻訳されました。

Device Mode でモバイルデバイスをシミュレートする

Kayce Basques

Sofia Emelianova

デバイスモードを使用すると、モバイルデバイスでのページの表示やパフォーマンスを大まかに確認できます。

デバイスモードとは、モバイルデバイスのシミュレートに役立つ Chrome DevTools の機能の総称です。主な機能は次のとおりです。

モバイルビューポートのシミュレーション
CPU のスロットリング
ネットワークのスロットリング
重要なポイント: または、[ネットワーク] パネルで接続速度をスロットリングすることもできます。
さらに、[センサー] タブで次の操作を行います。
- 位置情報のシミュレーション
- 向きの設定

制限事項

デバイスモードは、ページがモバイルデバイスでどのように表示されるかを 1 次近似したものと考えてください。デバイスモードでは、コードを実際にモバイルデバイスで実行することはありません。ノートパソコンやデスクトップパソコンでモバイルユーザーエクスペリエンスをシミュレートします。

モバイルデバイスには、DevTools ではシミュレートできない要素がいくつかあります。たとえば、モバイル CPU のアーキテクチャは、ノートパソコンやデスクトップパソコンの CPU のアーキテクチャとは大きく異なります。疑わしい場合は、実際にモバイルデバイスでページを運営することをおすすめします。リモートデバッグを使用すると、実際にモバイルデバイス上で実行しながら、ノートパソコンやデスクトップパソコンからページのコードを表示、変更、デバッグ、プロファイリングできます。

モバイルビューポートをシミュレートする

[デバイス] > [デバイスのツールバーを切り替え] をクリックして、モバイルビューポートをシミュレートできるツールバーを開きます。

デバイスのツールバー。

デフォルトでは、[ディメンション] が [レスポンシブ] に設定されたデバイスツールバーがビューポートで開きます。

レスポンシブビューポートモード

ハンドルをドラッグして、ビューポートを必要なサイズにサイズ変更します。または、幅と高さのボックスに特定の値を入力します。この例では、幅が 480 に、高さが 415 に設定されています。

[レスポンシブビューポートモード] でビューポートのサイズを変更するためのハンドル。

または、幅のプリセットバーを使用して、ワンクリックで幅を次のいずれかに設定できます。

幅のプリセットバー。

モバイル（S）	モバイル M	モバイル（左）	タブレット	ノートパソコン	ノートパソコン（L）	4K
320px	375 ピクセル	425 ピクセル	768 ピクセル	1,024 ピクセル	1,440 ピクセル	2,560 ピクセル

メディアクエリを表示

ビューポートの上にメディアクエリのブレークポイントを表示するには、 [その他のオプション] > [メディアクエリを表示] をクリックします。

メディアクエリを表示します。

DevTools でビューポートの上に 2 つのバーが表示されるようになりました。

max-width ブレークポイントがある青色のバー
min-width ブレークポイントがあるオレンジ色のバー。

ブレークポイントがトリガーされるように、ビューポートの幅を変更するには、ブレークポイント間をクリックします。

ビューポートの幅を変更するには、ブレークポイント間をクリックします。

対応する @media 宣言を見つけるには、ブレークポイント間を右クリックして、[Reveal in source code] を選択します。DevTools で、[エディタ] の対応する行に [ソース] パネルが開きます。

ソースコードのプルダウンメニューに表示

デバイスのピクセル比を設定する

デバイスピクセル比（DPR）とは、ハードウェア画面上の物理ピクセルと論理（CSS）ピクセルの比率です。つまり、DPR は CSS ピクセルの描画に使用する画面ピクセル数を Chrome に指示します。Chrome では、HiDPI（High Dots Per Inch）ディスプレイで描画するときに DPR 値が使用されます。

DPR 値を設定するには:

[その他のオプション]（） > [デバイスピクセル比を追加] をクリックします。
ビューポートの上部にあるアクションバーで、新しい [DPR] プルダウンメニューから DPR 値を選択します。

デバイスタイプを設定する

[Device Type] リストを使用して、モバイルデバイスまたはデスクトップデバイスをシミュレートします。

[Device Type] リスト。

上部のアクションバーにリストが表示されない場合は、その他のオプション アイコン > [デバイスの種類を追加] を選択します。

次の表に、オプションの違いを示します。「レンダリング方法」とは、Chrome でページをモバイルとパソコンのどちらのビューポートとしてレンダリングするかを指します。カーソルアイコンは、ページにカーソルを合わせたときに表示されるカーソルの種類を表します。「発生したイベント」は、ページでの操作時に touch イベントと click イベントのどちらを送信するかを示します。

オプション	レンダリング方法	カーソルアイコン	発生したイベント
モバイル	モバイル	かこって	タッチ操作
モバイル（タッチなし）	モバイル	標準	click
パソコン	パソコン	標準	click
パソコン（タップ）	パソコン	かこって	タッチ操作

デバイス固有モード

特定のモバイルデバイスの寸法をシミュレートするには、[Dimensions] リストでデバイスを選択します。

[ディメンション] リスト。

詳しくは、カスタムのモバイルデバイスを追加するをご覧ください。

ビューポートを横向きに回転する

[screen_rotation] [rotation] をクリックして、ビューポートを横向きに回転させます。

横向き。

デバイスのツールバーの幅が狭いと、[回転] ボタンは表示されなくなります。

デバイスのツールバー。

画面の向きを設定するもご覧ください。

デュアルスクリーンモードを切り替える

Surface Duo など、一部のデバイスには 2 つの画面があり、片方または両方の画面をアクティブにする 2 つの方法を使用できます。

デュアルスクリーンとシングルスクリーンを切り替えるには、ツールバーの devices_fold [デュアルスクリーンモードを切り替え] をクリックします。

デュアルスクリーンモードがオンになっている。

デバイス形状の設定

一部のデバイス（Asus Zenbook Fold など）は折りたたみ式画面を備えています。このような画面には、連続的な形状と折りたたまれた形状があります。連続した形状とは「フラット」な位置を意味し、折りたたまれている状態はディスプレイの各セクション間に角度を形成します。

デバイスの形状を設定するには、ツールバーの対応するプルダウンメニューから [連続] または [折りたたんだ] を選択します。

形状は折りたたまれています。

デバイスのフレームを表示

Google Nest Hub などの特定のモバイルデバイスの寸法をシミュレートする場合は、その他のオプション アイコン > [デバイスのフレームを表示] を選択すると、ビューポートの周囲に実機のフレームが表示されます。

デバイスのフレームを表示します。

この例では、DevTools に Google Nest Hub のフレームが表示されます。

Google Nest Hub のデバイスフレーム。

カスタムのモバイルデバイスを追加する

カスタムデバイスを追加するには:

[デバイス] リストをクリックし、[編集] を選択します。
[設定] > [デバイス] タブで、サポートされているデバイスのリストからデバイスを選択するか、[カスタムデバイスを追加] をクリックして独自のデバイスを追加します。
独自に追加する場合は、デバイスの名前、幅、高さを入力し、[追加] をクリックします。

デバイスピクセル比、ユーザーエージェント文字列、デバイスタイプのフィールドは省略可能です。デバイスタイプのフィールドは、デフォルトで [モバイル] に設定されているリストです。
ビューポートに戻り、[ディメンション] リストから新しく追加したデバイスを選択します。

ルーラーを表示

ルーラーを表示するには、その他のオプション アイコン > [ルーラーを表示] をクリックします。ルーラーのサイズ単位はピクセルです。

ルーラーを表示します。

DevTools では、ルーラーはビューポートの上部と左側に表示されます。

ビューポートの上と左にあるルーラー。

特定のマークのところにあるルーラーをクリックして、ビューポートの幅と高さを設定します。

ビューポートをズームする

ズームインするには [ズーム] リストを使用します。

ズーム] の順に選択します。

スクリーンショットをキャプチャする

ビューポートの内容のスクリーンショットを撮影するには、 [その他のオプション] > [スクリーンショットをキャプチャ] をクリックします。

[その他のオプション] メニューの [スクリーンショットをキャプチャ] オプション。

ページ全体のスクリーンショット（ビューポートには表示されないコンテンツも含む）をキャプチャするには、同じメニューから [フルサイズのスクリーンショットをキャプチャ] を選択します。

ネットワークと CPU のスロットリング

ネットワークと CPU の両方をスロットリングするには、[スロットル] リストから [ミッドティアモバイル] または [ローエンドモバイル] を選択します。

スロットルリスト。

ミッドティアモバイルは、高速 3G をシミュレートし、通常の 4 倍の速度になるように CPU をスロットリングします。ローエンドモバイルは、低速の 3G をシミュレートし、CPU を通常の 6 倍遅くスロットリングします。スロットリングは、ノートパソコンまたはデスクトップパソコンの通常の処理能力に比例することに注意してください。

デバイスのツールバーの幅が狭い場合、[スロットル] リストは表示されません。

CPU のみのスロットル調整

ネットワークではなく CPU のみをスロットリングするには、[パフォーマンス] パネルに移動し、[キャプチャ設定] をクリックして、[CPU] リストから [4x 速度低下] または [6x 速度低下] を選択します。

CPU のリスト。

ネットワークのみのスロットリング

CPU ではなくネットワークのみをスロットリングするには、[Network] パネルに移動し、[Throttle] リストから [Fast 3G] または [Slow 3G] を選択します。

スロットルリスト。

または、Command+Shift+P（Mac）または Ctrl+Shift+P（Windows、Linux、ChromeOS）を押してコマンドメニューを開き、「3G」と入力して [高速 3G スロットリングを有効にする] または [低速 3G スロットリングを有効にする] を選択します。