【Chrome検証モード】スマホ表示時にデバイスフレームも表示する方法

Google Chromeの検証モード（デベロッパーツール）でスマホ表示した際に、デバイスフレームも表示する方法についてです。

Chromeでは、サイト訪問時に右クリックメニューから検証モードにすることができますよね。このとき、レスポンシブ表示（スマホから見た場合のサイト表示）を確認することができますが、選択したデバイスのフレームもエミュレートさせることができました。

上の画像のとおり、デバイスフレームを表示させることが可能です。

この表示設定自体は簡単でした。
しかし、検証ツール内で選択できる全てのスマホデバイスのフレームを表示させることはできないようでした。

記事前半でフレーム表示させることのできるデバイスを整理しつつ、記事後半で実際にデバイスフレームを表示する方法について解説します。

デバイスフレームを表示できる端末は限られている

確認したところ、一部のApple製品のデバイスのみ対応しているようでした。
apple製品の中でも、iPhone Xなどではデバイスフレームを表示できなかったので、注意が必要です。対応しているデバイスを表にまとめます。

自分の環境にて、Chrome検証モード時に選択することができたデバイス名を対象しています。
おそらく、ほぼほぼデフォルトだと思います。

ご覧のとおりですので、使用する際はお気をつけください。

Chromeの検証モードで『デバイスフレーム』も表示する方法

簡単、３ステップです。

順番に見ていきます。

手順①：検証モードを開く

対象サイト内で右クリックし、メニュー内の「検証」をクリックします。

検証モードの画面が表示されました。
デフォルトですと、デスクトップで出力した場合の画面が、左側に表示されているはずです。

手順②：レスポンシブ表示に切り替える

「Elements」横にあるタブレットとスマホのようなアイコンをクリックします。

すると、画面左側に表示されていたデスクロップでの出力画面が、レスポンシブでの画面表示に切り替わりました。

手順③：デバイスフレームを表示させる

スマホの画面表示がされているペイン右上からオプションメニューを開き、「show device frame」をクリックします。

これで、デバイスフレームを表示する準備は完了しました。
あとは、選択しているデバイスがフレーム表示に対応していれば、画面に自動的に表示されるはずです。

上の画像の場合は「iPhone 6/7/8 Plus」を選択しているので、デバイスフレームが表示されています。

先述のとおり、「show device frame」を有効化した状態でデバイスを選択しても、全てのデバイスでフレーム表示できるわけではないのでご注意ください。

デバイスフレーム全体が表示されない場合

環境によっては、デバイスフレームを表示したときに画面全てが表示されきらない場合もあります。僕の環境でも、表示倍率「100％」だと見切れてしまうようです。

デバイスフレーム上部にあるメニューに「〜％」という項目があるので、調整してみてください。⬆の画像では、「75％」で設定しています。

無事、デバイスフレーム全体が表示されました。

画面を切り離すこともできる

⬆の画像のとおり、デバイスフレームの画面を独立して表示させることもできます。

ソースコードが表示されているペインの右上のメニューをクリックし、Dock side内の一番左のアイコンをクリックします。

これで、独立して表示できました。

元に戻したい場合は、再度Dock sideから同じアイコンをクリックするだけです。

まとめ

というわけで、Google Chromeの検証モード（デベロッパーツール）でスマホ表示した際に、デバイスフレームも表示する方法についてでした。

この機能を使うことで、視覚的にスマホデバイスでの表示だと理解しやすくなりますので、ぜひ活用してみてください。

今回は、以上です！
最後までお読み頂きありがとうございました。