SHIDEN DESIGN BLOG

tumnail_20170825

device-pixel-ratioなどRetinaディスプレイ高解像度ディスプレイ対応のこと

SponsorLink

appleのRetinaディスプレイの登場から早数年、android端末をはじめapple製以外のPCモニターにおいても高解像度が当たり前の時代と言うことで、おさらいも兼ねた備忘録的な記事です。
 
 
 

解像度について

 
 
解像度はdots per inchを略した「dpi」またはpixel per inchを略した「ppi」と言う単位を用いた場合、1インチ=2.54cmの中にいくつのドット(ppiの場合はピクセル)があるかと言う、画素の密度を示しています。
 

dot

ビットマップ画像は点の集まりなのですが、その一つ一つの点がドットです。
 

pixel

ドットに色情報を持たせたものがピクセルで、このピクセルを日本語にしたものが画素です。
 
 
また、ディスプレイに表示される総画素数を縦のピクセル数×横のピクセル数または、横のピクセル数×縦のピクセル数の形式で示したものを画面解像度と言います。
 

iPhone7

画面解像度:750 x 1,334
画素密度:326ppi
 

XperiaXZ

画面解像度:1080 x 1920
画素密度:423.636ppi
 
 
 

2つのピクセルとデバイス・ピクセル比

 
 
現在のWEB制作において、解像度の項で出てきた物理的なピクセルと、CSSで用いる理論的なピクセルは分けて考えなといけません。その理由はデバイス・ピクセル比にあります。
 
従来のディスプレイでは、1つの理論的なピクセルに対して1つの物理的なピクセルで描画を行い、この場合のデバイス・ピクセル比は1.0となります。
対して、Retinaディスプレイなどデバイス・ピクセル比2.0の高解像度ディスプレイでは、理論的なピクセルの1平方ピクセルに対して4つの物理的なピクセルで描画が行われます。
なお、android端末の中にはデバイス・ピクセル比3.0の端末も存在し、この場合は理論的なピクセルの1平方ピクセルに対して9つの物理的なピクセルで描画が行われます。
 
image_20170825_01
 
例えば、画面解像度(物理的なピクセル)が750 x 1,334でデバイス・ピクセル比2.0であるiPhone7では、理論的なピクセルが375 x 667ということになりCSSでwidthを375px以上に設定した要素を配置すると、横にフラフラ動く気持ちの悪いサイトになってしまいます。
 
 
 

画像の対応策

 
 
デバイス・ピクセル比1.0のディスプレイでは等倍で描画されるので、理論的なピクセルに合わせた画像を使用しても問題ないのですが、デバイス・ピクセル比2.0のディスプレイでは2倍に拡大されてしまい、画像がぼやけてしまうので、綺麗に表示させたい場合は2倍のサイズの画像を用意する必要があります。
 
image_20170825_02
 
デバイス・ピクセル比3.0のディスプレイ用は3倍のサイズの画像です。
 
 
単純にimage@2x.jpのwidthを120px、heightを75pxとして配置すると解決するのですが、大きいサイズの画像を読み込むため従来のディスプレイではパフォーマンスを低下させるだけになってしまいます。
そこで、以下の方法で画像を切り替えて対応するのが一般的になっています。
 
 

imgタグのsrcset

 

 
読み込ませる画像と条件をカンマ区切りで指定します。
この場合の条件はデバイス・ピクセル比で、1x2xの部分が、それぞれデバイス・ピクセル比1.0、デバイス・ピクセル比2.0となります。
widthとheightを指定しなくても、自動的に縮小して表示されます。
 
srcsetに対応していないブラウザではsrcの画像が読み込まれます。
 
 

Media queryのdevice-pixel-ratio

 

 
background-imageとして使用する画像の場合はMedia queryのdevice-pixel-ratioとresolutionで条件を指定します。
device pixel ratioは「デバイスピクセル比」ですのでわかりやすいですね。2はデバイス・ピクセル比2.0となります。
 
device-pixel-ratioは、アップルが独自にWebKitを拡張し、後にAndroidやChromeなどが対応したものであるのに対して、resolutionはW3Cで定められた標準規格です。
resolutionで使用できる単位には3種類あり、それぞれ以下のようになっています。
 
dpi (1インチあたりのドット数)
 
dpcm (1センチメートルあたりのドット数)
 
dppx (1pxあたりのドット数)
 
この辺ややこしいので、とりあえずdppxを使用してdevice-pixel-ratioの数字と合わせておけば問題ありません。
 
 

background-imageのimage-set

 

 
background-imageのもうひとつの方法です。
imgタグのsrcsetに似ていますね。
 
 
 

さいごに

 
 
javascriptでデバイス・ピクセル比を取得できるメソッドにwindow.devicePixelRatioがあります。
デバイス・ピクセル比を返してくれるのですが、とりあえずコンソールログを見てみて下さい。
 

 
返ってきた値が1であれば通常ディスプレイ、2であればデバイス・ピクセル比2.0となります。
ただし、FirefoxやIEでサポートされていなかったり、同じ端末でもブラウザによって違う値が返ってきたりと問題があるので、あまり使い道はなさそうです。
 
 
 

SponsorLink

Related Articles