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

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

Kayce Basques

Sofia Emelianova

デバイスモードを使用すると、モバイルデバイスでのページの外観や動作を概算できます。

概要

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

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

制限事項

デバイスモードは、モバイルデバイスでのページの外観や操作性の 1 次近似値と考えることができます。デバイスモードでは、実際にモバイルデバイスでコードを実行することはありません。ノートパソコンやデスクトップパソコンでモバイルユーザーエクスペリエンスをシミュレートします。

モバイルデバイスの機能の中には、DevTools でシミュレートできないものもあります。たとえば、モバイル CPU のアーキテクチャは、ノートパソコンやデスクトップパソコンの CPU のアーキテクチャとは大きく異なります。判断に迷う場合は、実際にモバイルデバイスでページを表示することをおすすめします。リモートデバッグを使用すると、ノートパソコンやデスクトップパソコンで実際にモバイルデバイス上でページのコードを表示、変更、デバッグ、プロファイリングできます。

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

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

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

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

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

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

デバイスのツールバー。

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

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

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

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

幅プリセットバー。

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

メディアクエリを表示

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

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

DevTools で、ビューポートの上に 2 つのバーが追加されました。

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

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

ブレークポイント間をクリックすると、ビューポートの幅を変更できます。

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

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

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

デバイスピクセル比（DPR）とは、ハードウェア画面上の物理ピクセルと論理（CSS）ピクセルの比率です。つまり DPR は、CSS ピクセルの描画に使用する画面ピクセル数を Chrome に指示します。Chrome では、HiDPI（1 インチあたりの高ドット数）ディスプレイに描画する際に DPR 値が使用されます。

DPR 値を設定するには:

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

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

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

[Device Type]（デバイスタイプ）リスト。

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

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

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

デバイス固有モード

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

ディメンションリスト。

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

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

ビューポートを横向きに回転するには、[screen_rotation] の [回転] をクリックします。

横向き。

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

デバイスのツールバー。

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

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

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

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

デュアルスクリーンモードをオンにしました。

デバイス形状の設定

Asus Zenbook Fold など、一部のデバイスには折りたたみ式画面が搭載されています。このような画面には、連続または折りたたみの形状があります。連続する姿勢とは「平らな」位置を意味し、折りたたまれた状態は、ディスプレイのセクション間の角度を形成します。

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

姿勢を折りたたみに設定しました。

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

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

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

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

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

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

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

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

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

ルーラーを表示

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

ルーラーを表示します。

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

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

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

表示領域をズームする

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

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

スクリーンショットを撮る

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

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

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

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

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

[スロットル] リスト。

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

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

CPU のみのスロットリング

CPU のみをスロットリングし、ネットワークはスロットリングしない場合は、[Performance] パネルに移動し、[Capture Settings] をクリックして、[CPU] リストから [4x 低速]、[6x 低速]、または [20x 低速] を選択します。

CPU リスト。

ネットワークのみをスロットルする

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

[スロットル] リスト。

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

コマンドメニュー。