いつもお疲れ様です。
この記事では、Google Chromeの検証モード（デベロッパーツール）でスマホ表示した際に、デバイスフレームも表示する方法についてご紹介します。
Chromeでは、サイト訪問時に右クリックメニューから検証モードにすることができますよね。このとき、レスポンシブ表示（スマホから見た場合のサイト表示）を確認することができますが、選択したデバイスのフレームもエミュレートさせることができました。
上の画像のとおり、デバイスフレームを表示させることが可能です。
この表示設定自体は簡単でした。しかし、検証ツール内で選択できる全てのスマホデバイスのフレームを表示させることはできないようでした。記事前半でフレーム表示させることのできるデバイスを整理しつつ、記事後半で実際にデバイスフレームを表示する方法について解説します。
Contents
デバイスフレームを表示できる端末は限られている
確認したところ、一部のApple製品のデバイスのみ対応しているようでした。Apple製品の中でも、iPhone Xなどではデバイスフレームを表示できなかったので注意が必要です。対応しているデバイスを表にまとめます。
自分の環境にて、Chrome検証モード時に選択することができたデバイス名を対象しています。おそらく、ほぼほぼデフォルトだと思います。
| デバイス名 | フレーム表示可否 |
| Moto G4 | × |
| Galaxy S5 | × |
| Pixel 2 | × |
| Pixel 2 XL | × |
| iPhone 5/SE | ○ |
| iPhone 6/7/8 | ○ |
| iPhone 6/7/8 Plus | ○ |
| iPhone X | × |
| iPad | ○ |
| iPad Pro | × |
| Surface Duo | × |
| Galaxy Fold | × |
ご覧のとおりですので、使用する際はお気をつけください。
Chromeの検証モードで『デバイスフレーム』も表示する方法
簡単３ステップで表示できます。
- 手順①：検証モードを開く
- 手順②：レスポンシブ表示に切り替える
- 手順③：デバイスフレームを表示させる
順番に見ていきます。
手順①：検証モードを開く
対象サイト内で右クリックし、メニュー内の「検証」をクリックします。
検証モードの画面が表示されました。
デフォルトですと、デスクトップで出力した場合の画面が、左側に表示されているはずです。
手順②：レスポンシブ表示に切り替える
「Elements」横にあるタブレットとスマホのようなアイコンをクリックします。
すると画面左側に表示されていたデスクロップでの出力画面が、レスポンシブでの画面表示に切り替わりました。
手順③：デバイスフレームを表示させる
スマホの画面表示がされているペイン右上からオプションメニューを開き、「show device frame」をクリックします。
これで、デバイスフレームを表示する準備は完了しました。
あとは、選択しているデバイスがフレーム表示に対応していれば、画面に自動的に表示されるはずです。
上の画像の場合は「iPhone 6/7/8 Plus」を選択しているので、デバイスフレームが表示されています。
先述のとおり、「show device frame」を有効化した状態でデバイスを選択しても、全てのデバイスでフレーム表示できるわけではないのでご注意ください。
デバイスフレーム全体が表示されない場合
環境によっては、デバイスフレームを表示したときに画面全てが表示されきらない場合もあります。僕の環境でも、表示倍率「100％」だと見切れてしまうようです。
デバイスフレーム上部にあるメニューに「〜％」という項目があるので、調整してみてください。⬆の画像では、「75％」で設定しています。
無事、デバイスフレーム全体が表示されました。
画面を切り離すこともできる
⬆の画像のとおり、デバイスフレームの画面を独立して表示させることもできます。
ソースコードが表示されているペインの右上のメニューをクリックし、Dock side内の一番左のアイコンをクリックします。
これで、独立して表示できました。
元に戻したい場合は、再度Dock sideから同じアイコンをクリックするだけです。
まとめ
というわけで、Google Chromeの検証モード（デベロッパーツール）でスマホ表示した際に、デバイスフレームも表示する方法についてでした。
この機能を使うことで、視覚的にスマホデバイスでの表示だと理解しやすくなりますので、ぜひ活用してみてください。
今回は、以上です！
最後までお読み頂きありがとうございました。
