Webサイト制作でつまずきがちな解像度に関わるあれこれ
スマホやRetinaディスプレイが出てきてから、サイト制作の時に解像度に関することで時々混乱することがあるので整理してみました。
目次
解像度とppiとdpi
解像度はビットマップ画像における画像密度のことで、一般に1インチ(25.4mm)をいくつに分けるかによって数字で表します。
単位はdpi、またはppiを用いられることが多いです。
よくディスプレイの解像度を1024×768ピクセルという総画素数で表現されることも多いですが、
正確にはこれは本来の解像度を意味する使われ方ではないそうです。
…が、実際はそのへんは曖昧で、ppiやdpiをピクセル密度、画面密度と呼ぶこともあるようです。
本記事では分かりやすく、ppiやdpiをピクセル密度、1024×768ピクセルを画面解像度と呼びます。
参考：解像度 – Wikipedia
ppi – Wikipedia
画面解像度 – Wikipedia
ppiは、pixel per inchの略で1インチにピクセルがいくつあるかを表します。
dpiはdots per inchの略で1インチ辺りにドットがいくつあるか表します。
1インチ四方辺りのピクセル数ではないので注意してください。
ディスプレイでは多くの場合、ピクセルとドットは等しい扱いなのでppiとdpiは同じ意味で使われます。
※ピクセルとドットの違いについては後述します。
デバイスピクセル比（devicePixelRatio）
デバイスピクセル比とは画像の1ピクセルをデバイスで何ピクセルとして描画するか表した数値です。
両方ピクセルが使われていてややこしいので、
本記事では便宜上、画像の1ピクセルを画像ピクセル、デバイスのピクセルをデバイスピクセルと言います。
例えばRetinaディスプレイのような超高解像度でこの機能を使わずに
画像ピクセル=デバイスピクセルとして描画すると画像や文字が小さ過ぎて使いづらくなります。
iPhone3の2倍の解像度を持つiPhone4では、通常に描画すると4倍（縦2倍×横2倍）のスクリーンサイズになります。
例えばiPhone4のデバイスピクセル比は2です。
これは1画像ピクセルを、4デバイスピクセル(縦2×横2)で描画します。
今まで等倍で描画されてた画像が、2倍のピクセルで描画されるわけです。
このような仕様なので、従来通り作った画像は拡大されてぼやけて見えてしまいます。
画像をきれいに表示するには、高解像度ディスプレイ用には元の画像×デバイスピクセル比の画像を用意します。
また、デバイスピクセル比はJavaScriptのwindow.devicePixelRatioで取得できます。
CSSでは、 -webkit-device-pixel-ratioを使用して、
CSS3のMeia Queriesを使った画像の切り替えができます。
下記のコードはデバイスピクセル比が2の場合は背景に2倍の画像を指定します。
@media only screen and (-webkit-min-device-pixel-ratio:2){
#hoge{
background: url(img_device-pixel-rationx2.jpg);/*2倍の画像を指定*/
}
}
もう一点この仕組に関連することで、
デバイスのサイズも本来の960×640ピクセルではなく480×320ピクセルとして認識されます。
Andoroidのデバイスピクセル比は下記のサイトで調査してたので参考にしてください。
Android端末のdevicePixelRatio[to-R]
dip
（※Androidアプリに興味ない方はこの項は飛ばしたほうが良いです。ややこしくなると思うので…）
dipとはDensity Indipendent Pxcelsの略で、密度に依存しないピクセルとなります。
Androidアプリを作る時はサイズをピクセルでなくてdipで作ることでピクセル密度に左右されないデザインができます。
まず、Android端末のdpiはdpiの数値によって4つに分類されます。
- xhdpi…320dpi
- hdpi…240dpi
- mdpi…160dpi
- ldpi…120dpi
mdpi(160dpi)の時の1ビクセルの物理的な大きさが 1dip となります。これが基準です。
mdpiの2倍にあたるxhdpiは、1dipは2倍のピクセルで描画されます。
例えば100dipを指定した場合、
mdpi(160dpi)の時は等倍の100ピクセルとして描画されます。
mdpiの2倍にあたるxhdpiでは、200ピクセルとして描画されます。
このようにピクセル密度に応じて描画のピクセル数を変えることで、どの機種でも見た目の大きさに差が出ないようになります。
| 分類 | 解像度 | dip:px | 100pipを描画するpx数 |
|---|---|---|---|
| xhdpi | 320dpi | 1dip:2px | 200px |
| hdpi | 240dpi | 1dip:1.5px | 150px |
| mdpi | 160dpi | 1dip:1px | 100px |
| ldpi | 120dpi | 1dip:0.75px | 75px |
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。
参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて
viewport
仮想的なウインドウサイズです。
viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。
そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。
viewportのデフォルト値は980ピクセルです。
（※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？
情報が見つからなかったので知ってる方は教えてください）
また、viewportの数値はサイト側で指定できます。
スマホ専用にサイト制作する時はこの設定が必須となります。
下記はviewportをデバイスの幅にした例です。
<meta name="viewport" content="width=device-width">
その他詳しい使い方は過去記事を参考にしてください。
viewportの動作検証（iPhoneのみ）
デバイスのサイズ（device-widthやdevice-height）
そのデバイスの（スクリーンの）画面解像度を表した数値です。
CSS3のMedia Queriesやviewportの指定で、
device-widthやdevice-heightを使った時の対象はこの数値です。
iPhone4の画面解像度は960×640ピクセルなのでデバイスのサイズもこれと同じと思いがちですが、
デバイスピクセル比があるので1/2サイズの480ピクセル×320ピクセルとなります。
そのデバイスの最大画面解像度ではなく、ディスプレイの環境設定で指定した解像度と考えるといいと思います。
デバイスのサイズはJavaScriptのscreen.width、screen.heightで取得できます。
またdevice-widthをMedia Queriesで利用するとPC向けに制作したサイトでもスマホだけにCSSを適用したりできます。
使用用途は思いつきませんが…。
@media only screen and (max-device-width:320px){
/*スマホ用のCSS*/
}
下記のデモではPCからアクセスすると文字色が赤、スマホからだと青になります。
ウインドウのサイズ
ブラウザのウインドウサイズです。
特にスマートフォンでは上記のviewportと大きく関わってます。
CSS3のMedia Queriesの指定で、widthやheightを使った時の対象はこの数値です。
jQueryで$(window).width()、$(window).height()で取得できます。
上記のデバイスのサイズとウインドのサイズの違いをPCを例にすると下記の様になります。
下記ページにアクセスするとデバイスサイズとウインドサイズを確認できます。
まとめ
これらをまとめると以下のようになります。
iPhoneの画面解像度は960×640ピクセル、ピクセル密度は326ppiです。
ただしデバイスピクセル比は2であるので、480×320ピクセルとして表示されます。
1画像ピクセルは4デバイスピクセルで描画されます。
safariを立ち上げた時のデフォルトのウインドウサイズは980ピクセルです。
デバイス（スクリーン）の幅は320ピクセルです。
viewportでwidth=device-widthを指定するとウインドウサイズは320ピクセルになります。
おまけ：ピクセルとドットの違い
ディスプレイにおいてはピクセルとドットは同じと考える場合が多いですが、正確には異なるとする考えもあります。
ピクセル – Wikipediaでは、ピクセルは拡大縮小しても変わらず、それを画面に表示するためのドットは拡大縮小に応じて変わるとされてます。
例えばディスプレイにおいて320×240ピクセルの画像を100％表示すれば320×240ドットとなるが、200％表示ならば640×480ドットとなる。
どちらが正解かは分かりませんが、今のところ僕はその時の状況でどちらの意味か読み取ってます。
ただし、印刷においてはピクセルとドットは異なります。
ピクセルは画像データを構成する最小単位です。
商業印刷は網点と呼ばれる小さな点の集まりで表現されており、さらにその網点を構成する最小の点がドットです。
詳しくは割愛しますが、このように印刷においてはピクセルとドットは別のものです。
また、印刷からの流れで画像解像度を350dpiということもありますが、これはピクセル=ドットの意味です。
こういうことが重なっていろんなことの定義が曖昧になってる気がしますね…。
Comment
コメント(0)
コメントする
Trackback(7)
解像度とは？「dpi、ppi」などの意味と違いについて | karasuneko Blog
[ Design ] 解像度72dpi/96dpiのお話 | root
実技（スマートフォンサイト制作実習） | 東京の求職者支援訓練
企業自習① | 東京の求職者支援訓練
企業実習① | 東京の求職者支援訓練
企業実習② | 東京の求職者支援訓練
起業実習⑪ | 東京の求職者支援訓練