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

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

Kayce Basques

Sofia Emelianova

デバイスモードを使用すると、モバイルデバイスでページがどのように表示され、どのように動作するかを推定できます。

概要

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

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

制限事項

デバイスモードは、モバイルデバイスでのページの外観と操作性を近似的に確認するためのものです。デバイスモードでは、実際にはモバイルデバイスでコードを実行しません。ノートパソコンまたはパソコンでモバイルユーザーエクスペリエンスをシミュレートします。

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

デバイスツールバーを開く

デバイスツールバーを開く手順は次のとおりです。

DevTools を開きます。
上部のアクションバーにある [] デバイスツールバーを切り替えるをクリックします。

デバイスのツールバーの切り替えボタン

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

デフォルトでは、デバイスツールバーはビューポートで開き、[サイズ] は [レスポンシブ] に設定されています。[サイズ] プルダウンを使用すると、特定のモバイルデバイスのサイズをシミュレートできます。

デバイスツールバー。

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

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

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

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

幅のプリセットバー。

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

メディアクエリを表示

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

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

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

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

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

ブレークポイント間を移動して、ビューポートの幅を変更します。

対応する @media 宣言を確認するには、ブレークポイントの間で右クリックし、[ソースコードで表示] を選択します。DevTools で、エディタの対応する行に [ソース] パネルが開きます。

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

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

デバイスのピクセル比（DPR）は、ハードウェア画面上の物理ピクセル数と論理（CSS）ピクセル数の比率です。つまり、DPR は CSS ピクセルの描画に使用する画面ピクセル数を Chrome に伝えます。Chrome は、HiDPI（高解像度インチ）ディスプレイに描画するときに DPR 値を使用します。

DPR 値を設定するには:

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

デバイスの種類を設定する

[デバイスの種類] リストを使用して、モバイルデバイスまたはパソコンをシミュレートします。

[デバイスタイプ] リスト。

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

次の表に、各オプションの違いを示します。レンダリング方法は、Chrome がページをモバイルビューポートまたはデスクトップビューポートとしてレンダリングするかどうかを示します。カーソルアイコンは、ページにカーソルを合わせたときに表示されるカーソルの種類を示します。[イベントが発生した] は、ページを操作したときにページが touch イベントと click イベントのどちらを発生させたかを示します。

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

デバイス固有のモード

特定のモバイルデバイスのサイズをシミュレートするには、[サイズ] リストからデバイスを選択します。

ディメンションリスト。

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

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

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

横向き。

デバイスツールバーが狭い場合、[回転] ボタンは表示されません。

デバイスツールバー。

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

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

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

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

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

デバイスの状態を設定する

Asus Zenbook Fold など、一部のデバイスには折りたたみ式の画面があります。このような画面には、連続型と折りたたみ型の 2 つのポーズがあります。連続したポーズとは「平らな」位置を指し、折りたたむとディスプレイのセクション間に角度が形成されます。

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

ポーズが折りたたみに設定されている。

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

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

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

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

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

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

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

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

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

ルーラーを表示

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

ルーラーを表示します。

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

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

特定のマーカーで定規をクリックして、ビューポートの幅と高さを設定します。

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

[ズーム] リストを使用してズームインまたはズームアウトします。

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

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

ビューポートに表示されている内容のスクリーンショットをキャプチャするには、 [その他] > [スクリーンショットをキャプチャ] をクリックします。

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

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

デバイス固有モードでスクリーンショットをキャプチャする際にデバイスのフレームを含めるには、まず [デバイスのフレームを表示] をオンにしてから、前述の手順に沿って [スクリーンショットをキャプチャ] をクリックします。

デバイスのフレームを含むスクリーンショットを撮影する。

DevTools でスクリーンショットを撮るその他の方法については、DevTools でスクリーンショットをキャプチャする 4 つの方法をご覧ください。

ネットワークと CPU をスロットリングする

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

スロットルリスト。

ミッドティアモバイルは高速 3G をシミュレートし、CPU をスロットリングして通常の 4 倍遅くします。低価格帯のモバイル: 低速の 3G をシミュレートし、CPU を通常の 6 倍にスロットリングします。スロットリングは、ノートパソコンまたはデスクトップの通常の機能に関連して行われます。

デバイスツールバーが狭い場合、[スロットル] リストは非表示になります。

CPU のみをスロットリングする

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

CPU のリスト。

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

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

スロットルリスト。

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