Chrome DevTools での Device Mode によるモバイル端末のシミュレートにおける幅の考え方について調べる
というのも、Chrome DevTools のDevice Mode で選べるモバイル端末には現在、Galaxy S5から、iPhone6、iPad Proなどがあるが、Google Pixel3 がないので Google Pixel3の場合にどう表示されるかを検証するため、幅をどれくらいにしたらよいかを算出する必要があった
例えば、iPhone6をモバイル端末として選択したとき、表示される幅は375pxと表示されるが、Google Pixel3の場合は何pxか？ということ
調べるとよくわからないことがある
375pxとあるが iPhone6 のスペックをみると、Rendered Pixelsには 750px とあり 375 の数字は Points と表現している
The Ultimate Guide To iPhone Resolutions
ここでおさえておくべきは、iPhone6 の画面解像度は 750px × 1334px（横 × 高さ）だが、Retinaディスプレイ（スケール 2）なので、実際表示されるサイズは 375px × 667px ということ
つまり、Points にスケール係数を乗算してPixcel にレンダリングしている（ラスタライズ）という関係から
Chrome DevTools のDevice Modeの幅はPoints（論理的な画面サイズ）を表していることになる
以下がわかりやすかった
iPhone 6 Screens Demystified
Google Pixel3のCSSピクセルサイズ
では、Google Pixel3のCSSピクセルサイズはいくつか？
Android独自の単位に「dp(Density-independent Pixel)」（密度非依存ピクセル）があり、これがCSSピクセルにあたる
dp × スケール = px
スケールは汎用密度とよばれる6種類に分類されていた解像度に紐付き、汎用密度は画面密度(dpi)によってきまり、以下の表になっている
| 汎用密度 | 画面密度 | スケール |
|---|---|---|
| ldpi | ～120dpi | 0.75 |
| mdpi | ～160dpi | 1 |
| hdpi | ～240dpi | 1.5 |
| xhdpi | ～320dpi | 2 |
| xxhdpi | ～480dpi | 3 |
| xxxhdpi | ～640dpi | 3.5 |
んで、Pixel3 のスペックは 2160×1080px │ 440dpi │ xxhdpi ということで
1080px / 3 = 360dp
なので、360pxとすればよい
Androidの画面スペックは参考URLからもらったけど、公式にはどこにあるんだろう？
