Chrome DevToolsのEmulated DevicesにPixel 6 Proを追加

Google ChromeのDevToolsにPixel 6 Proの画面サイズを追加したときの覚書。
CSS BootstrapのBreakpoint用。

結論としては下記情報をデバイスエミュレーターに追加。

[Device name] Pixel 6 Pro
[Dementions]  412x892（Device pixel ratioは空欄）
[User agent string] Mozilla/5.0 (Linux; Android 12; Pixel 6 Pro) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Mobile Safari/537.36

Pixel 6 Proを購入したので下記サイトにアクセスして確認した。

• mydevice.io : web devices capabilities
• IPアドレスや画面解像度など確認くん - instant tools

ちなみにiPhoneの場合は下記サイトが参考になる

• iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita

各デバイスの画面サイズ一覧は日本語では「CSSピクセル」、英語では「css viewport list」で検索すると出てきやすい。

Device pixel ratioを計算

最初はDevice pixel ratioを計算しようとしたけど途中であきらめた。

• Google Pixel 6 Pro スペック・仕様 - Google ストア
  6.7 インチ、QHD+（1440 x 3120）LTPO OLED、512 ppi、アスペクト比 19.5:9
• Pixel density - Wikipedia
• High DPI Images for Variable Pixel Densities - HTML5 Rocks

【関連記事】

• anyDensity="false"から脱出するためにAndroidの画面サイズ関連を理解する