この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。
対象:PC版(デスクトップ版)Google Chrome
スマートフォン(スマホ)が広く普及し、昨今では多くのWebサイトが、画面の狭いスマホに対応した専用のビュー(表示)を備えるようになってきました。
サイトがスマホでどう見えるのかは、もちろん実際にスマホで表示してみるのが確実です。ただ、スマホやタブレットにはさまざまな機種があり、画面の解像度も異なるため、どう見えるかを全て実機でテストするのは困難です。
こんなときは、デスクトップ版Webブラウザの「スマホ表示」機能(スマートフォンのWebブラウザのエミュレーション)を利用すると、PCで簡単にスマホサイトの確認ができます。操作方法もそれほど難しくありません。
本Tech TIPSでは、Windows OS/macOSのデスクトップ版Google Chrome(以下、Chromeと略)の「デベロッパーツール(開発者ツール)」でスマホ表示を確認する方法を紹介します。
Chromeでスマホによる表示を確認するには、最初に対象のWebページを表示してから、右上のメニューボタンをクリックして[その他のツール]−[デベロッパー ツール]をクリックします。次のキーボードショートカットでも呼び出せます。
以下のようにデベロッパーツールのペインが現れたら、ブラウザペインが見やすいように、その位置を変えましょう。デベロッパーツール内の右上にあるメニューボタンをクリックして[Dock side]から適切な位置を選びます。ここでは下端に移動してみます。
続いて表示モードをスマホに変えましょう。それには次の画面にある(5)のアイコンをクリックします。あるいは、デベロッパーツールにフォーカスを置いた状態で、以下のショートカットキーを押します。
これでブラウザペインはスマホ表示モードに切り替わりました。しかし、デザインなど表示内容はまだPC用のままなので、ページの内容を再度読み込み直しましょう。それには次の画面にある(6)の再読み込みアイコンをクリックするか、以下のショートカットキーを押します。
これで完全にブラウザペインの内容がスマホ用に切り替わりました。以上のようにPCとスマホの間で表示モードを切り替えたときには、必ずページを読み込み直しましょう。
この表示モードでは、マウスポインターを指代わりとして、タッチしたり画面をドラッグしたりできます。
スマホ表示モードでは、前述の切り替えアイコンが水色で表示されます。PC表示に戻すには、再びそのアイコンをクリックするか、デベロッパーツールにフォーカスを置いた状態で、以下のショートカットキーを押します。
iPhoneやNexus、Galaxyなどのスマホについては、あらかじめ画面解像度やユーザーエージェントなどの設定がプリセットされていて、メニューから選ぶだけで簡単にエミュレートできます。特定のスマホでの表示を確認したい場合は、このプリセットされた設定を選ぶと簡単です。
上の画面でメニューに表示されているスマホは、プリセットの一部です。その他のプリセットはメニューの[Edit]をクリックすると表示され、メニューに追加できます。さらに、まったく新規にスマホの設定(解像度やユーザーエージェント文字列など)を追加することも可能です。
例えばiPhoneの場合、執筆時点でiPhone XS以降の機種はほとんどプリセットされていません。そこで筆者は下表のような設定を追加して利用しています(あくまで一例です)。
Device Name | Width | Height | Device pixel ratio | User agent string(例) |
---|---|---|---|---|
iPhone SE2 | 375 | 667 | 2 | Mozilla/5.0 (iPhone; CPU iPhone OS 13_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.92 Mobile/15E148 Safari/604.1 |
iPhone XR/11 | 414 | 896 | 2 | |
iPhone XS/11 Pro | 375 | 812 | 3 | |
iPhone XS Max/11 Pro Max | 414 | 896 | 3 | |
iPad gen7 | 810 | 1080 | 2 | Mozilla/5.0 (iPad; CPU OS 13_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.72 Mobile/15E148 Safari/604.1 |
iPad Pro "10.5/Air gen3 | 834 | 1112 | 2 | |
iPad Pro "11 | 834 | 1194 | 2 | |
iPad Pro "12.9 | 1024 | 1366 | 2 | |
執筆時点でプリセットされていないiPhone/iPadの追加設定例 解像度は、iOSの拡大表示をオフにした([標準]を選んだ)場合のもの。またユーザーエージェント文字列は、機種よりもOSやWebブラウザ(クライアントアプリケーション)に依存するので、上記と異なる文字列を指定することもあります。 |
エミュレートしたいスマホが前述のプリセットにない場合、ブラウザペイン上で解像度などを動的に変更することも可能です。
スマホ表示で画面解像度を個別に設定するには、スマホを選ぶためのメニューで[Responsive]を選び、その隣の欄に横(水平)/縦(垂直)の解像度の数値を記入します。また、その下のバーをクリックすると、ワンタッチで横の解像度を320〜2560pxの範囲で選択できます。
画面解像度を変更すると、ブラウザペインが極端に小さくなって文字が読めなくなることがあります。そのときには次の画面にある(1)のメニューを開いて、表示倍率を変更します。
Copyright© Digital Advantage Corp. All Rights Reserved.