Chrome Emulated DevicesにiPhone XS Max, Google Pixel 3 追加方法

Emulated Devicesのデバイスは33種類

Chromeにはモバイル端末のシミュレートが可能なDevice Modeが存在する。

Device Mode でのモバイル端末のシミュレート

実際の端末がなくても簡単にテストができる便利な機能だが、デフォルトで確認できる端末は限られている。

最新のChromeバージョン70では33種類のモバイル端末のシミュレートができる。(2018年11月19日現在)

逆に言うと33種類に含まれないiPhone XS MaxやGoogle Pixel 3はデフォルトではシミュレートすることができない。

そのためiPhone XS MaxやGoogle Pixel 3などで確認するにはEdit...から自分で登録する必要がある。

iPhone XS MaxやGoogle Pixel 3などで確認するにはEdit...から自分で登録する必要がある。

Emulated Devicesにないデバイスを追加

iOSだとiPhone XS Max, iPhone XRがないので手動で登録する。

ちなみにiPhone XSはiPhone Xと同じ解像度なので登録は不要。

幅と高さは物理的なピクセル(Rendered Pixels)ではなくポイント(Points)を入力する。(Device pixel ratioも必要)

Chrome Emulated DevicesにiPhone XS Max, Google Pixel 3 追加方法

The Ultimate Guide To iPhone ResolutionsというiPhoneの解像度一覧が記載されているWebサイトがあるので、こちらを参照するとわかりやすい。

User agent stringはiOS 12のものを使用。

Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

端末のユーザーエージェントをコピーできるページもあるので、より正確なUAが必要な場合はこちらに実機でアクセスしてコピーする。

Copy UserAgent

iPhone XS MaxとiPhone XRのDevice pixel ratioはそれぞれ3と2で異なるので注意。

AndroidはiPhoneに比べてモバイル端末の種類が多いため、自身のサイトでアクセス数の多い機種を優先的に同様の手順で登録すると良いだろう。