Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

Kayce Basques

Sofia Emelianova

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

概要

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

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

制限事項

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

モバイルデバイスの側面の中には、DevTools でシミュレートできないものもあります。たとえば、モバイル CPU のアーキテクチャは、ノートパソコンやデスクトップ CPU のアーキテクチャとは大きく異なります。判断に迷う場合は、モバイルデバイスでページを実際に実行してみるのが最善の方法です。リモートデバッグを使用すると、モバイルデバイスで実際に実行されているページのコードを、ノートパソコンやデスクトップから表示、変更、デバッグ、プロファイリングできます。

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

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

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

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

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

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

デバイスツールバー。

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

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

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

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

幅のプリセットバー。

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

メディアクエリを表示

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

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

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

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

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

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

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

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

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

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

DPR 値を設定するには:

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

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

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

[デバイスの種類] リスト。

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

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

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

デバイス固有のモード

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

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

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

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

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

横向き。

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

デバイスツールバー。

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

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

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

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

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

デバイスのポスチャーを設定する

一部のデバイス（Asus Zenbook Fold など）には、折りたたみ式の画面があります。このような画面には、連続または折りたたみという姿勢があります。連続姿勢は「平ら」な位置を指し、折りたたみ姿勢はディスプレイのセクション間の角度を指します。

デバイスの姿勢を設定するには、ツールバーの対応するプルダウンメニューから [Continuous] または [Folded] を選択します。

折りたたんだ状態に設定されています。

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

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

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

この例では、デベロッパーツールに Google Nest Hub のフレームが表示されています。

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

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

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

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

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

ルーラーを表示

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

ルーラーを表示します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スロットルリスト。

中程度のモバイルは、高速 3G をシミュレートし、CPU を通常の 4 倍遅くなるようにスロットリングします。低速モバイルは、低速 3G をシミュレートし、CPU を通常の 6 倍遅くします。なお、スロットリングはノートパソコンやデスクトップの通常の性能を基準として行われます。

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

CPU のみをスロットルする

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

CPU のリスト。

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

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

スロットルリスト。

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