デバイスモードを使用すると、モバイル デバイスでのページの外観や動作を概算できます。
概要
デバイスモードとは、モバイル デバイスのシミュレーションに役立つ Chrome DevTools の機能の総称です。主な機能は次のとおりです。
制限事項
デバイスモードは、モバイル デバイスでのページの外観や操作性の 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] リストを使用して、モバイル デバイスやデスクトップ デバイスをシミュレートします。
上部のアクションバーにリストが表示されない場合は、[その他のオプション]() > [デバイスの種類を追加] を選択します。
次の表に、これらのオプションの違いを示します。レンダリング方法とは、Chrome でページをモバイルのビューポートとしてレンダリングするか、パソコン上のビューポートとしてレンダリングするかを指します。カーソル アイコンは、ページにカーソルを合わせたときに表示されるカーソルの種類を表します。配信されたイベントとは、ページでなんらかの操作を行ったときに、ページで touch
イベントと click
イベントのどちらが発生したかを示します。
オプション | レンダリング方法 | カーソル アイコン | 配信イベント |
---|---|---|---|
モバイル | モバイル | サークル | タッチ操作 |
モバイル(タッチなし) | モバイル | 標準 | クリック |
パソコン | パソコン | 標準 | クリック |
デスクトップ(タップ) | パソコン | サークル | タッチ操作 |
デバイス固有モード
特定のモバイル デバイスのサイズをシミュレートするには、[ディメンション] リストからデバイスを選択します。
詳しくは、カスタムのモバイル デバイスを追加するをご覧ください。
ビューポートを回転して横向きにする
ビューポートを横向きに回転するには、[screen_rotation] の [回転] をクリックします。
デバイスのツールバーが狭い場合、[rotation] ボタンは表示されなくなります。
向きを設定するもご覧ください。
デュアル スクリーン モードを切り替える
Surface Duo などの一部のデバイスには 2 つの画面があり、1 つまたは両方の画面をアクティブにして使用する方法は 2 つあります。
デュアル スクリーンとシングル スクリーンを切り替えるには、ツールバーの devices_fold [デュアル スクリーン モードを切り替え] をクリックします。
デバイス形状の設定
Asus Zenbook Fold など、一部のデバイスには折りたたみ式画面が搭載されています。このような画面には、連続または折りたたみの形状があります。連続する姿勢とは「平らな」位置を意味し、折りたたまれた状態は、ディスプレイのセクション間の角度を形成します。
デバイスの形状を設定するには、ツールバーの対応するプルダウン メニューから [連続] または [折りたたみ] を選択します。
デバイスのフレームを表示
Google Nest Hub など、特定のモバイル デバイスのサイズをシミュレートする場合は、その他のオプション()> [デバイス フレームを表示] を選択すると、ビューポートの周囲に物理デバイスのフレームが表示されます。
この例では、DevTools によって 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 ではなくネットワークのみをスロットリングするには、[Network] パネルに移動し、[Throttle] リストから [Fast 3G] または [Slow 3G] を選択します。
または、Command + Shift + P(Mac)または Ctrl + Shift + P(Windows、Linux、ChromeOS)を押してコマンド メニューを開き、「3G
」と入力して [高速 3G スロットリングを有効にする] または [低速の 3G スロットリングを有効にする] を選択します。
ネットワーク スロットリングは、[パフォーマンス] パネルで設定することもできます。[Capture Settings] をクリックし、[Network] リストから [Fast 3G] または [Slow 3G] を選択します。
センサーをエミュレートする
[Sensors] パネルを使用して、位置情報のオーバーライド、デバイスの向きのシミュレーション、タップ操作、アイドル状態のエミュレートを行います。
以降のセクションでは、位置情報をオーバーライドしてデバイスの向きを設定する方法について説明します。機能の一覧については、デバイス センサーをエミュレートするをご覧ください。
位置情報をオーバーライドする
位置情報オーバーライド UI を開くには、[Customize and control DevTools] をクリックし、[その他のツール] > [センサー] を選択します。
または、Command + Shift + P(Mac)または Ctrl + Shift + P(Windows、Linux、ChromeOS)を押してコマンド メニューを開き、「Sensors
」と入力して [センサーを表示] を選択します。
[位置情報] リストからプリセットのいずれかを選択するか、[その他...] を選択して独自の座標を入力するか、[位置情報が不明] を選択して位置情報がエラー状態の場合にページの動作をテストします。
向きを設定
画面の向き UI を開くには、DevTools のカスタマイズと制御アイコン をクリックし、[その他のツール] > [センサー] を選択します。
または、Command + Shift + P(Mac)または Ctrl + Shift + P(Windows、Linux、ChromeOS)を押してコマンド メニューを開き、「Sensors
」と入力して [センサーを表示] を選択します。
[向き] リストからプリセットのいずれかを選択するか、[カスタムの向き] を選択して、独自のアルファ値、ベータ値、ガンマ値を設定します。