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

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

Kayce Basques

Sofia Emelianova

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

概要

デバイスモードは、Chrome DevTools のモバイルデバイスをシミュレートします。主な機能は次のとおりです。

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

制限事項

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

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

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

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

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

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

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

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

デバイスのツールバー。

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

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

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

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

幅プリセットバー。

モバイル（S）	モバイル M	モバイル L	タブレット	ノートパソコン	ノートパソコン L	4K
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 では、ビューポートの上部と左側にルーラーが表示されます。

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

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

表示領域をズームする

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

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

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

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

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

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

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

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

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

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

ネットワークと CPU の両方をスロットリングするには、プルダウンから [Mid-tier mobile]（ミッドティアモバイル）または [Low-end mobile]（ローエンドモバイル）を選択します。 スロットル リスト。

[スロットル] リスト。

ミッドティアモバイル: 高速 3G をシミュレートし、CPU をスロットリングして、正常ですローエンドモバイル: 低速の 3G をシミュレートし、CPU を通常の 6 倍の速度でスロットリングします。維持スロットリングは、ノートパソコンやデスクトップパソコンの通常の機能に比例します。

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

CPU のみのスロットリング

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

CPU リスト。

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

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

[スロットル] リスト。

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