デバイスモードを使用してモバイルデバイスでのページの外観とパフォーマンス。
デバイスモードは、モバイルデバイスをシミュレートするのに役立つChrome DevToolsの機能の緩やかなコレクションの名前です。, これらの機能は次のとおりです。
- モバイルビューポートのシミュレーション
- ネットワークのスロットル
- CPUのスロットル
- 地理位置情報のシミュレーション
- 方向の設定
制限
デバイスモードは、モバイルデバイス デバイスモードでは、実際にはモバイルデバイスでcodeonを実行しません。 きをシミュレーモバイルユーザーからノートパソコンやデスクトップに作成されます。
モバイルデバイスには、DevToolsがシミュレートできない側面がいくつかあります。, たとえば、モバイルCpuのアーキテクチャは、laptoporデスクトップCpuのアーキテクチャとは非常に異なります。 疑問がある場合、あなたの最善の策は、実際にモバイルデバイス上でページを実行することです。 リモートデバッグの閲覧、変更、デバッグ、プロファイルページコードからノートパソコンやデスクトップで実際に走ります。
モバイルビューポートをシミュレートする
デバイスツールバーの切り替えをクリックします
モバイルビューポートをシミュレートできるUIを開きます。
デフォルトでは、デバイスツールバーはレスポンシブビューポートモードで開きます。
レスポンシブビューポートモード
ハンドルをドラッグして、必要なサイズにビューポートのサイズを変更します。 または、幅と高さのボックスに特定の値を入力します。 図2では、幅は628に設定され、高さは662に設定されています。
メディアクエリを表示
ビューポートの上にメディアクエリブレークポイントを表示するには、[その他のオプション]をクリックしてから、[メディアクエリを表示]を選択します。
ブレークポイントをクリックしてビューポートの幅を変更し、ブレークポイントがトリガーされるようにします。
デバイスタイプを設定します
デバイスタイプリストを使用して、モバイルデバイスまたはデスクトップデバイスをシミュレートします。
以下の表は、オプションの違いについて説明しています。 レンダリングmethodrefersかどうかクローム描画しのページを移動またはデスクトップのビューポートです。 カーソルアイコンページ上にカーソルを置くと、表示されるカーソルの種類を指します。, 発射されるイベントは、ページと対話するときにtouchまたはclickイベントを発生させるかどうかを参照します。,id=”b8e8c2fed7″>
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.,
Rotate the viewport to landscape orientation
Click Rotate 
to rotate the viewport to landscape orientation.
Note that the Rotate button disappears if your Device Toolbar is narrow.
方向の設定も参照してください。
Show device frame
iPhone6のような特定のモバイルデバイスのサイズをシミュレートする場合は、その他のオプションを開き、[Show device frame]を選択してビューポートの周りに物理デバイスフレームを表示します。
カスタムモバイルデバイスの追加
カスタムデバイスを追加するには、
-
デバイスリストをクリックし、[編集]を選択します。
図11. Edit -
カスタムデバイスの追加をクリックします。
- デバイスの名前、幅、および高さを入力します。 Thedeviceピクセル比、ユーザーエージェントの文字列は、デバイス分野のオプションです。 デバイスタイプフィールドは、デフォルトでモバイルに設定されています。,
Figure 12. Creating a custom device
Show rulers
Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.
ビューポートをズーム
ズームリストを使用してズームインまたはズームアウトします。
ネットワークとCPUをスロットル
ネットワークとCPUをスロットルするには、スロットルリストから中間層モバイルまたはローエンド
中間層モバイルは高速3Gをシミュレートし、CPUをスロットルして通常の4倍になるようにします。 ローエンドモバイルは遅い3Gをシミュレートし、通常よりも6倍遅いあなたのCPUを絞ります。スロットルは、ラップトップまたはデスクトップの通常の機能に相対的であることに注意してください。
デバイスのツールバーが狭い場合、スロットルリストは非表示になります。
Cpuのみをスロットル
ネットワークではなくCPUのみをスロットルするには、パフォーマンスパネルに移動し、キャプチャ設定
をクリックし、CPUリストから4x減速または6x減速を選択します。
ネットワークのみをスロットル
CPUではなくネットワークのみをスロットルするには、ネットワークパネルに移動し、スロットルリストからfast3GまたはSlow3Gを選択します。,
またはCommand+Shift+P(Mac)またはControl+Shift+P(Windows、Linux、Chrome OS)を押してコマンドメニューを開き、3Gと入力し、高速3Gスロットルまたは低速3Gスロットルを有効にするを選択します。
パフォーマンスパネルからネットワークスロットリングを設定することもできます。, キャプチャ設定をクリックし、ネットワークリストから高速3Gまたは低速3Gを選択します。
地理位置情報の上書き
地理位置情報のオーバーライドUIを開くには、カスタマイズと制御DevTools
をクリックし、より多くのツール>センサーを選択します。
地理位置情報リストからプリセットのいずれかを選択するか、カスタムロケーションを選択して独自の座標を入力するか、Location unavailableを選択して地理位置情報がエラー状態のときにyourpageがどのように動作するかをテストします。
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
方向リストからプリセットのいずれかを選択するか、カスタム方向を選択して独自のアルファ、ベータ、およびガンマ値を設定します。
フィードバック
フィードバックを残すための他の方法については、DevToolsコミュニティに参加するを参照してください。