CSSピクセルとデバイスピクセル(ディスプレイ解像度覚え書き)

レスポンシブサイトを作っていると、ブレイクポイントをどこにするかでものすごく悩みます。

スマホのディスプレイサイズに依存しないブレイクポイントにしよう、と思っても、やはりひととおり知っていないと始まらない、スマホのディスプレイサイズ。
ブレイクポイントを決めるための覚え書きです。

デバイス CSS
ピクセル
( points )
デバイス
ピクセル
デバイス
ピクセル比
ppi インチ
iPhone 3G 320 ✕ 480 320 ✕ 480 1 3.5
iPhone 3Gs 320 ✕ 480 320 ✕ 480 1 3.5
iPhone 4 320 ✕ 480 640 ✕ 960 2 3.5
iPhone 4s 320 ✕ 480 640 ✕ 960 2 3.5
iPhone 5/5s/SE 320 ✕ 568 640 ✕ 1136 2 4
iPhone 6/6s/7/8 375 ✕ 667 750 ✕ 1334 2 326 4.7
iPhone 8Plus 414 ✕ 736 1080 ✕ 1920 3 401  5.5
iPhone X  375 ✕ 812 1125 ✕ 2436 3 458 5.8

ちなみに、ブレイクポイントで指定する数値は、CSSピクセルを対象とするものですよ。