Don't miss out on the action at this year's Chrome Dev Summit, streaming live on YouTube. Watch now.

レスポンシブな端末固有ビューポートのテスト

アップデート版の Device Mode(Chrome 49 以降)は、モバイル ファーストになった DevTools において不可欠な部分であり、メインの DevTools バーを拡張するものです。ここでは、そのコントロールを使用して幅広い端末をシミュレートする方法やレスポンシブにする方法について説明します。

TL;DR

  • Device Mode のスクリーン エミュレータを使用してサイトがレスポンシブであるかテストします。
  • カスタム プリセットを保存して、後で簡単に利用できるようにします。
  • Device Mode は、実際の端末テストの代わりになるものではありません。制限事項に注意してください。

ビューポート コントロールの使用

Device Mode が有効

ビューポート コントロールを使用して、さまざまな端末でサイトがレスポンシブであるかテストできます。2 つのモードがあります。

  1. [Responsive]。両側の大きいハンドルを使用してビューポートを自由にリサイズできるようにします。
  2. 特定の端末。ビューポートを特定の端末の正確なビューポート サイズに固定し、特定の端末の特性をエミュレートします。

Responsive モード

既定の動作モードとして [Responsive] モード を使用することをおすすめします。サイトやアプリの開発中にこのモードを使用し、ビューポートを頻繁にサイズ変更して、不明な端末タイプや将来の端末タイプにも適応するレスポンシブ デザインを作成します。

[Responsive] モードを最大限に活用するには、メディアクエリ バー を有効にします。

ビューポート サイズのカスタマイズ

ビューポートの大きいサイズ変更ハンドルをドラッグするか、メニューバーの値をクリックしてより細かく設定します。

端末固有モード

開発が終わりに近づき、特定のモバイル(特定の iPhone や Nexus など)でのサイトの表示を完成させるには、端末固有モード を使用します。

組み込みの端末プリセット

現在最もよく使用される端末が端末ドロップダウンに表示されます。端末を選択すると、各プリセットによって以下のような特定の端末特性のエミュレーションが自動的に設定されます。

  • 正しい「User Agent(UA)」文字列を設定します。
  • 端末の解像度と DPI(デバイス ピクセル比)を設定します。
  • タップ イベントをエミュレートします(該当する場合)。
  • モバイル スクロールバーのオーバーレイと meta viewport をエミュレートします。
  • ビューポートが定義されていないページのテキストのサイズを自動的に設定します(大きくします)。
端末を選択

カスタム端末プリセットの追加

Device Mode には、エミュレーション用にさまざまな端末が用意されています。用意されていない特殊な端末やニッチ端末が見つかった場合は、カスタム端末を追加できます。

カスタム端末を追加するには、次のようにします。

  1. DevTools の [Settings] に移動します。
  2. [Devices] タブをクリックします。
  3. [Add custom device] をクリックします。
  4. 端末名、幅、高さ、デバイス ピクセル比、および User Agent 文字列を入力します。
  5. [Add] をクリックします。

カスタム端末が [Device] ドロップダウン メニューで利用できるようになります。

端末を選択

端末状態と画面の向き

画面の向きの切り替え

特定の端末をエミュレートする場合、Device Mode のツールバーに追加のコントロールが表示されます。このコントロールは、主に端末画面の向き(横向きと縦向き)を切り替えるために使用します。

一部の端末では、コントロールによって実行されるのは画面の向きの切り替えだけではありません。Nexus 5X など、サポートされている端末の場合は、次のような特定の端末状態をエミュレートできるドロップダウンが表示されます。

  • 既定のブラウザ UI
  • Chrome ナビゲーション バー付き
  • 開いたキーボード
端末 UI の変更

ズームしてフィット

ブラウザ ウィンドウで実際に使用できるスペースよりも解像度が高い端末でテストする場合があります。このような場合は、ズームしてフィット オプションが便利です。

  1. [Fit to Window] を選択すると、使用可能な最大スペースに合わせてズームレベルが自動的に設定されます。
  2. 明示的なパーセンテージ は、画像の DPI をテストする場合などに役立ちます。
ズームしてフィット

オプション コントロール(タッチ、メディアクエリ、DPR など)

オプション コントロールを変更したり有効にしたりするには、端末ツールバーの右側にあるスリードットのアイコンをクリックします。現在、次のオプションが含まれています。

  • ユーザー エージェント タイプ(UA とタップイベントのエミュレート)
  • デバイス ピクセル比
  • メディアクエリ
  • ルーラー
  • ネットワークの設定(UA、ネットワーク スロットリング)
Device Mode の設定

各オプションの詳細については、以下の説明をご覧ください。

ユーザー エージェント タイプ

[User Agent Type]、つまり端末タイプを設定すると、端末のタイプを変更できます。 有効な値は次のとおりです。

  1. Mobile
  2. Desktop
  3. Desktop with touch

この設定を変更すると、モバイル ビューポートとタップイベントのエミュレーションに影響があり、UA 文字列が変更されます。 そのため、PC 用のレスポンシブなサイトを作成し、カーソルを合わせたときの効果をテストする場合は、[Responsive] モードで [Desktop] に切り替えます。

使い方:[Network conditions] ドロワーでユーザー エージェントを設定することもできます。

デバイス ピクセル比(DPR)

Retina ではないマシンで Retina 端末(またはその逆)をエミュレートする場合は [Device pixel ratio] を調整します。 デバイス ピクセル比 (DPR)は、論理ピクセルと物理ピクセルの比です。 Nexus 6P などの Retina ディスプレイ搭載端末では、標準の端末よりピクセル密度が高くなります。これは、ビジュアル コンテンツの鮮明さやサイズに影響する可能性があります。

ウェブ上の「デバイス ピクセル比」(DPR)の感度の例を次に示します。

  • 次のような CSS メディアクエリ

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

  • CSS image-set ルール。

  • 画像の srcset 属性。

  • window.devicePixelRatio プロパティ。

ネイティブ Retina ディスプレイでは、1 インチあたりのドット数(DPI)が低いと粗い表示になり、DPI アセットが高いほど鮮明になることがわかります。 標準ディスプレイでこの効果をシミュレートするには、DPR を 2 に設定し、ズームでビューポートのサイズを変更します。 2x のアセットは表示が鮮明で、1x のアセットは表示が粗くなります。

メディアクエリ

メディアクエリは、レスポンシブ ウェブデザインに不可欠な要素です。メディアクエリ インスペクターを表示するには、スリードット メニューで [Show Media queries] をクリックします。 DevTools によってスタイルシートのメディアクエリが検出され、一番上のルーラーに色付きのバーとして表示されます。

Show media queries

メディアクエリ インスペクター

メディアクエリは、次のように色分けされます。

最大幅を対象とするクエリ。
範囲内の幅を対象とするクエリ。
最小幅を対象とするクエリ。

メディアクエリの即時プレビュー

ビューポート サイズを調整して対象の画面サイズのスタイルをプレビューするには、メディアクエリ バーをクリックします。

関連する CSS の表示

メディアクエリが定義されている CSS 内の場所を表示し、ソースコード内の定義にジャンプするには、バーを右クリックします。

Web Fundamentals のメディアクエリの表示

ルーラー

ビューポートの横にピクセルベースのルーラーを表示するには、このオプションを切り替えます。

ネットワークの設定(UA、ネットワーク スロットリング)

このオプションを選択すると、ネットワーク関連の動作を変更できるパネルがドロワーに表示されます。

  1. Disk Cache: [Disk Cache] を無効にすると、DevTools が開いている間にページとそのアセットがブラウザによってキャッシュに保存されなくなります。
  2. Network Throttling: ネットワーク スロットリングの詳細を参照してください。
  3. User Agent: 特定の UA(User Agent)文字列のオーバーライドを設定できます。

使い方:メインメニュー から [Network conditions] ドロワーを開くこともできます。

制限事項

Device Mode にはいくつかの制限事項があります。

  • 端末ハードウェア
  • GPU と CPU の動作はエミュレートされません。
  • ブラウザ UI
  • アドレスバーなどのシステム表示はエミュレートされません。
  • <select> 要素などのネイティブ表示はモーダルリストとしてエミュレートされません。
  • キーパッドを開く数字入力などの一部の機能強化は、実際の端末動作とは異なる場合があります。
  • ブラウザ機能
  • WebGL はエミュレータで動作しますが、iOS 7 端末ではサポートされていません。
  • MathML は Chrome でサポートされていませんが、iOS 7 端末ではサポートされています。
  • iOS 5 での画面の向きのズームバグはエミュレートされません。
  • line-height CSS プロパティはエミュレータで動作しますが、Opera Mini ではサポートされていません。
  • Internet Explorer に見られるような CSS ルールの制限は、エミュレートされません。
  • AppCache
  • エミュレータは、AppCache マニフェスト ファイル またはソース表示リクエストUA をオーバーライドしません。

これらの制限はありますが、Device Mode は十分に堅牢であり、ほとんどのタスクに対応できます。 実際の端末でテストする必要がある場合は、リモート デバッグを使用してさらに詳しく分析できます。