CSSの1pxは 液晶画面1ドットで表示されるとは限らない

太さ1pxの線は、液晶画面の1ドットの幅で描かれる……とは限らない!?

ウェブ上で「太さ1px」の線を引くよう装飾すると、たいていは液晶画面上でも「1ドットの太さ」で線が引かれます。例えば、右図を一般的なPC用液晶画面で表示した場合のように。

もし液晶画面のサイズが横幅1,024ドットであり、その領域の端から端までをすべて描画に利用可能であれば、最大で横幅1,024pxの画像が切れることなく・潰れることもなく表示できる……と考えて問題ありませんでした。これまでは。

※もちろん、閲覧者が自ら拡大縮小率を変更すれば、表示可能なサイズも変化します。

ところが、iPhoneをはじめとするスマートフォンに「Retinaディスプレイ」などの高精細ディスプレイが搭載されるようになると、話はそう単純ではなくなりました。

高精細ディスプレイでは、1pxが複数のドットで描かれることもある

例えば、iPhone4～5の端末だと、物理的な液晶画面の横幅は640px(ドットが横方向に640個)です。しかし、ブラウザが表示に使う解像度の横幅(device width)は320pxに設定されています。つまり、「320px分の内容」を「640個のドット」で描くことになります。したがって、CSSで「太さ1pxの線」を引くと、実際には液晶画面の「2ドットの幅」で線が引かれます。

※上記は(例えばHTMLのmeta要素でviewportの値に「initial-scale=1」を指定するなどして)、ズーム倍率が1に設定された状態で描画した場合の話です。

もし高精細ディスプレイを搭載した端末をお持ちなら、以下のサンプルページを表示させてみて下さい。このページには、右図のように縦横に5pxごとに線を引いた定規画像が掲載されています。
→「initial-scale=1での表示確認」サンプルページ

下図は、このサンプルページを、横640×縦1,136ドットの物理的な解像度を持つiPod touch(第5世代)のブラウザSafariで表示させてみた例です。横幅は640ドットあるはずなのに、背景の定規画像は、横方向に320pxまでしか表示されていないことが分かります(※下記の画像は、クリックすると拡大ページに移動します。そこでさらに画像をクリックすると原寸で表示されます)。


つまり、この端末では、「横320×縦460px」分の画像が、縦横2倍に拡大されて(＝1pxを縦横に2倍した計4ドットで描画して)「横640×縦920ドット」で表示されているわけです。

この倍率のことは「Device Pixel Ratio(デバイス・ピクセル・レート)」とも呼ばれ、端末によって2倍だったり3倍だったり様々です。もし2倍だった場合は、右図のように「1px」が「液晶4ドット」で表示されます。今後はもっと倍率の高い(＝高精細な)ディスプレイも出てくるかも知れません。

※現在の一般的なPC用ディスプレイではこの倍率が「1倍」なので、CSSの1pxは液晶画面でも1ドットです(閲覧者が画面の表示倍率を変更しない限りは)。

横幅300pxの画像は、実際には横幅600ドットで(倍率2倍で)表示？

上記のように「1pxを(縦横2ドットずつの)計4ドット」で描画する端末の場合、横幅300pxの画像を表示させると、実際には液晶画面の横幅600ドットを使って描画されます。

この場合、実際の横幅が600pxの画像を、(直接画像を加工はせずに)CSSを使って半分に縮小して横幅300pxとして表示させると、端末の液晶をフルに活用した(高精細な)表示ができるようになります。

高精細ディスプレイを搭載した端末をお持ちなら、下記のサンプルページも表示させてみて下さい。このページには右図のように、同じ写真が2枚ずつ並んでいます。写真の内容は同じですが、解像度(原寸サイズ)は異なっており、同じ表示面積になるようCSSを指定して掲載しています。

(1) 600×400pxの画像を、半分の面積300×200pxで表示
(2) 300×200pxの画像を、原寸の面積300×200pxで表示

どちらも表示サイズは横300px・縦200pxで同じですが、高精細ディスプレイで両者の画像を比較すると、綺麗さ(高精細さ)に差があることが分かります。

→「解像度の異なる画像の表示テスト」サンプルページ
(右図は、このページのURLを含んだQRコード)

一般的なPC用ディスプレイなど、「1px」を液晶画面の「1ドット」で表示させる環境では、ブラウザの設定で表示拡大率を200％にしてみると、(倍率2倍の)高精細ディスプレイでの表示の差を見ることができます。下図は、そのようにして2倍に拡大してみた場合の一例です。


このように、大きめの画像をアップロードしておき、CSSを使って表示面積を調整(縮小)する方法で掲載しておくと、高精細ディスプレイで閲覧された場合にも、そのディスプレイの高精細さを有効に活用した表示ができます。

1pxを何ドットで描画するのか？＝「dppx」

これまでにご紹介したように、「ウェブ(CSS)での1px」は、「液晶ディスプレイの1ドット」とイコールだとは限りません。CSS3には、解像度の単位として「1pxを何ドットで描画するのか」を示す「dppx」(dots per 'px' unit)という単位も定義されています。詳しくは、次のページでご紹介致します。