スマホサイトを確認するとき、いつもChromeのデバイスツールバーにめちゃくちゃお世話になっています。
PCブラウザ上でシミュレーション（エミュレーション？）できるのはすごく便利ですよね。
先日、特定のデバイスの表示を確認するときに選択項目がなく、はじめてカスタムで追加したのでやり方をメモしておきます。
device toolbarについて
デバイスツールバーはChromeの検証機能のひとつで、スマホ・タブレット画面時の表示確認ができます。
たくさんの機能があるようですが、私は表示の確認くらいしか使わないのでその他の機能についてはわかりません…。
F12または右クリック→「検証」から検証画面を開き、デバイスマークをクリックすると切り替わります。デバイスの選択も可能です。
デフォルトのデバイスは主要なもののみ
デバイス選択時にデフォルトで出ているデバイス、時々増えたりしているのでなんでだろう？と思っていたのですが、主要なもののみ出ているそうです。
デバイスを追加する方法
それではデフォルトのデバイス以外を追加する方法です。
デバイス選択プルダウンの「Edit…」を選択すると編集画面になります。
チェックボックスから選択
チェックボックスがたくさん並んでいるので、ここに追加したいデバイスがあればチェックを入れて追加。
チェックボックスになければ手動で追加
なければ「Add custom devise…」をクリックして手動で追加します。
・「Device Name」…デバイスの名前を入れます
・2行目…縦横のサイズを入れます。ピクセルでなくポイントと言われているほうです。
・「Device pixel radio」…dpiスケーリングのことだそうで、ピクセル比を入れます。retinaディスプレイなどは2になります。
・「User Agent string」…デバイス選択画面で表示する名前を入れます
iPhone11を追加するとしたら、
サイズは414×896、
ピクセル比は2、
デバイス名と表示名はiPhone11となります。（ほんとはiPhoneXRも同じ）
iPhone/iPadはこちらの早見表がわかりやすかったので貼っておきますね。
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表https://qiita.com/tomohisaota/items/f8857d01f328e34fb551
どんどん新しいデバイスが出てくるので、ついていくのが大変です（笑）。忘れないようにメモしておきました。
