CSS コーディング

レスポンシブサイトコーディング時のピクセルの考え方【cssピクセル】

レスポンシブサイトを作る時、大体の人がviewportは下記で指定してると思います。

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

これはビューポートのサイズをデバイスに合わせる、初期表示を等倍で表示させる。と言った指定になります。この場合、スマホのウィンドウサイズは何ピクセルと想定してコーディングしたらいいでしょう?

例えば私が持ってるiPhone11Proだと、ビューポートのサイズは375pxになります。

え!iPhoneってRetinaディスプレイ※なのにそんなちっちゃくなるの?って感じですよね。
その仕組みについて整理しながら書いていこうと思います。

※Retinaディスプレイは、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。

Wikipediaより

ちなみにviewportについては、こちらに詳しく書いてますのでご覧ください。

理解しておきたい、デバイスピクセルとcssピクセル

「px(ピクセル)」には2種類あります。

デバイスピクセル(=画面解像度)

これはディスプレイ解像度を指します。デバイスの物理的なピクセルの数です。
iPhone11Pro(横幅7.14cm)であれば1,125×2,436pxです。
そして私が使ってるiMac(横幅65.0cm/古いからRetinaじゃない)は2,560×1,440px。

ここでよくわかってない私は、あれ?物理的に考えて、iPhone11Proの横幅はiMacの1/9程しかないはずなのに、なんでデバイスピクセルは約半分もあるの?って思ってしまいました。

1ピクセルの大きさは具体的に決まってない!

例えば2012年に一番最初に発売されたスマホ「GALAXY Note SC-05D」は、横幅8.3cmでデバイスピクセル800×1280px。iPhone11Proの方が1センチ程小さいのに、デバイスピクセルは300程増えてます。この事から、デバイスピクセルが横幅(cm)に比例していない事がわかります。高解像度化に伴い、年々様々なデバイスのピクセル数が増えていってます。詰まってきてる、小さくなってると言った方がわかりやすいかも?
高解像度(ピクセル数が多い)、低解像度(ピクセル数が少ない)という事が理解できてきました。

なるほど!でも、高解像度化によってデバイスピクセル数がどんどん増えてくなら、そのデバイスで表示されるWebサイトはどんどん小さくなってしまう事になるのでは?

そこで「cssピクセル」の出番です!

cssピクセル

従来1デバイスピクセル=1cssピクセルだったのが、Retinaディスプレイなどの高解像度ディスプレイの登場により、そうは行かなくなってきました。このままだと文字サイズや画像サイズも小さくなり、Webサイトはどんどん見づらくなってしまいます。

そこで表示に差が出ないよう、1つの擬似的なピクセルに対して複数のデバイスピクセルを入れてしまおう!というのがcssピクセルになります。Retinaなどではないデバイスのブラウザでは特に処理されません。Retinaディスプレイ搭載デバイスのブラウザによって処理され、各デバイスによって若干異なります。

そして1つのcssピクセルにデバイスピクセルが何個入ってるか?というのが「デバイスピクセル比(Device-pixel-ratio)」になります。

なおAndroid端末では少し仕様が異なり、「dip(density-independent pixels)解像度」がcssピクセルに値するらしいです。

【Android】いまさら聞けないdp入門 – Qiita

またこちらでは、アクセスしたデバイスのcssピクセルサイズが確認できるのでご参考に!

Web便利ツール/デバイス情報の確認

各デバイスでのcssピクセルサイズ

私がサイト制作時に参考にしているデバイスの例です。
画像の作成はデバイスサイズに合わせ、コーディングの時はcssピクセルで計算されたウィンドウサイズに合わせてコーディングします。
ただ画像サイズが大きい程読み込みが遅くなるので、できれば視覚的にぼやけないギリギリのサイズで調整したいですね。。

iPhoneのウィンドウサイズ

デバイスデバイスサイズcssピクセルデバイスピクセル比
X / XS / 11Pro1,125 × 2,436375 × 8123
6/ 6s / 7 / 8 / SE(2)750 × 1,334375 × 6672

こちらでもっと多くの種類のデバイスについて確認できます。
「ポイント」がcssピクセルサイズ、「Retina」がデバイスピクセル比になります。

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

Android

Androidは使った事がないので、正直あまりよくわかりません。。
ざっくり分けると、320-410dp(cssピクセル)の範囲はマストらしいです。

詳しくは下記をご覧ください。たくさん載ってます。種類ありすぎ!

2016年発売Android端末のdp解像度まとめ – こやまカニ大好き

まとめ

レスポンシブサイトを作るときには、対象デバイスのcssピクセルでのウィンドウサイズを意識する。

画像はデバイスピクセルでのウィンドウサイズに合わせるが、容量が大きい程読み込み速度に影響するので軽量化を心がける。

ページトップへ