Weblasts

デバイスピクセル比とCSSピクセル

CSSピクセル

CSSピクセルとはWebサイトをブラウザで表示する際の擬似的なピクセル数を指しています。
コーディングの時に指定するサイズがCSSピクセルになります。
下の表をもとにマークアップすることになります。
メディアクエリなどで指定するブレイクポイントはこのCSSピクセルを利用して指定しています。

よく使われているスマートフォンのCSSピクセル

デバイスCSSピクセル
iPhone 5/5s/SE320 x 568
iPhone 6/6s/7/8375 x 667
iPhone 6/6s/7/8[Plus]414 x 736
iPhone X/XS375 x 812
iPhone XR/XS MAX414 x 896

デバイスピクセル

デバイスピクセルとは実際のディスプレイのピクセル数を指しています。
このデバイスピクセルは画像を表示する際に重要なもの。

デバイスデバイスピクセル
iPhone 5/5s/SE640 x 1136
iPhone 6/6s/7/8750 x 1334
iPhone 6/6s/7/8[Plus]1080 x 1920
iPhone X/XS1125 x 2436
iPhone XR828 x 1792
iPhone XS MAX1242 x 2688

デバイスピクセル比

デバイスピクセル比とはCSSピクセルをいくつのデバイスピクセルで表示するかの比率です。
デバイスピクセル比が2(2倍)の場合、1つのCSSピクセルを「縦2倍 x 横2倍」の計4つ(4倍)のデバイスピクセルで表示します。
デバイスピクセル比が3(3倍)の場合、1つのCSSピクセルを「縦3倍 x 横3倍」の計9つ(9倍)のデバイスピクセルで表示します。
これらを1pxとして扱うことで、文字や内容(画像は例外)をキレイに描写することが出来ます。

式に表すと、
[CSSピクセル] × [デバイスピクセル比] = [デバイスピクセル]

デバイスCSSピクセルデバイスピクセルデバイスピクセル比
iPhone 5/5s/SE320 x 568640 x 11362
iPhone 6/6s/7/8375 x 667750 x 13342
iPhone 6/6s/7/8[Plus]414 x 7361080 x 19202.6
iPhone X/XS375 x 8121125 x 24363
iPhone XR414 x 896828 x 17922
iPhone XS MAX414 x 8961242 x 26883
OTHOR その他
POPULAR