スマートフォンと画面解像度・ピクセル密度

解像度のばらつくスマートフォン

スマートフォン端末の画面サイズは端末によりばらばらです。iPhoneの画面は3.5インチと同じですが、Androidスマートフォンは3インチ前半から4インチ後半まで、幅広く分布しています。

画面サイズのばらつきも結構なものですが、解像度はそれよりも相当ばらついています。

iPhone 4はiPhone 3と比べ、縦横それぞれ2倍、計4倍ものピクセル数があります。Galaxy Nexusを始め、2011年秋以降に発売されたハイエンドのAndroidスマートフォンには720 × 1280と、一昔前のネットブックほどもある高い解像度を持った画面を備えています。

これだけ解像度に開きがありながら、端末の大きさは (ばらつきもあるものの) 手でつかめるサイズに収まっています。このため、画面の「ピクセル密度」に大きな違いがでてきます。

ピクセル密度と密度グループ

ピクセル密度とは、主に1インチあたりのピクセル数をいうもので、DPI (dot per inch) やPPI (pixel per inch) などと呼ばれています。

ピクセル密度が高いほど、面積あたりの解像度が高くなります。デスクトップではだいたいピクセル密度が同じ (100〜120くらい) なので、一般的に解像度が高くなるにつれ画面も大きくなります。反対に、スマートフォンは画面サイズが (だいたい) 同じなので、解像度が高くなるにつれ1ピクセルの大きさが小さくなり、画面が細密になります。

iPhone 4のRetina displayは解像度が640×960と、iPhone 3の解像度 (320×480) の4倍もあります。しかし、画面の大きさは同じ3.5インチです。ですので、iPhone 4のピクセル密度はiPhone 3の2倍になります。

次の表は、いくつかの端末の解像度とピクセル密度を並べたものです。

表を見ていると、ピクセル密度が 1) 160前後, 2) 210〜240, 3) 300〜320 と、多少の振れ幅があるもののおおよそ3つに分かれていることに気づきます。

このグループは「密度グループ」と呼ばれます。Androidでは解像度やピクセル密度など、画面の性質でグループ分けがされています。Androidで用意されている密度グループは次のとおりです。

iPhoneを当てはめると、iPhone 3までがmdpi、iPhone 4からはxhdpiに区分けされそうです。日本で流通しているAndroidスマートフォンの多くはhdpiに属するでしょうが、最近のHD解像度の端末はxhdpiに属しそうです。

IS05やXperia ray, INFOBAR A01/C01などはグループ上hdpiに属しています。しかし、画面サイズが小さいことからピクセル密度が300dpi前後と、xhdpiに近くなっています。小型で高解像度な端末が増えると、所属するグループだけでは画面の精細さを判断するのは難しくなるでしょう。

ピクセル密度の違いが見た目に影響する

さて、ピクセル密度のばらつきによって、すこし困ったことが起こります。密度の低い環境に合わせて作られたコンテンツの見た目が、密度の高い環境で良く見えない可能性が出てくるのです。

iPhone 4以降のiPhoneや、AndroidスマートフォンでWebサイトを表示すると、画像がぼやけて見えることがあります。

iPhone 4のRetina displayでは文字の綺麗さなどをうたっていますが、画像が綺麗に見えないのはどうしてでしょうか。ここで出てくるのが、デバイスピクセルとCSSピクセルという、2種類の「ピクセル」です。

「デバイスピクセル」と「CSSピクセル」

Webデザインにおける「ピクセル」は、ほとんどの場合「CSSピクセル」を指します。一方、画面のピクセルは「デバイスピクセル」と呼ばれたりします。

以下、CSSピクセルを「csspx」、デバイスピクセルを「dpx」と表記することがあります。

iPhone 4はiPhone 3に比べて縦横2倍、計4倍のデバイスピクセルを持ちます。今までより広い範囲を表示できるようになったわけですが、実際にそう表示してしまうと困ります。画面の大きさが同じだからです。たとえば、320×480ピクセルの画像をそのまま表示すると、iPhone 3では画面いっぱいになりますが、iPhone 4では画面の1/4しか表示されません。Webページでも同様なことが起こると、読めたものではなくなります。

これを解決するために、iPhone 4では、ひとつのCSSピクセルをふたつのデバイスピクセルで表しています。1csspx = 2dpxですから、border-width: 2pxは4dpxの線で描画されることになりますし、「100px × 100px」な画像は200dpx × 200dpxで描画されます。

画像編集ソフトで、画像を100％以上に引き伸ばすと、画像がぼけて見えます。高解像度のディスプレイで画像がぼける理由は、これと同じ事です。一方、ベクターで計算されるもの (アウトラインフォント、SVGのパスなど) は描画される箇所のデバイスピクセルが細かいので、精細に表示されます。画像がぼやける一方でフォントが綺麗なのはこのためです。

Androidスマートフォンでは端末の属する密度グループごとに、デバイスピクセルとCSSピクセルのマッピングが異なります。ひとつのデバイスピクセルをひとつのCSSピクセルで表示するのは、mdpi (160dpi) に属する端末です。このmdpiにおける「1ピクセル」は「解像度非依存ピクセル (“density-independent pixel”)」と呼ばれ、“dp”などと表記されます。

mdpiを基準にすると、hdpi (240dpi) は160dpiの1.5倍ですから、1csspx = 1.5dpxとなります。xhdpi (320dpi) は2倍なので、1csspx = 2dpxとなります。

現在使われているAndroidスマートフォンの多くはhdpiに属すので、border-width: 2pxは3dpxで表されることになります。1csspxは1.5dpxと整数値で割り切れないため値が丸められます。1csspxで指定された線が消える・細く見えることがあるのは、このためです。

この、デバイスピクセルとCSSピクセルの対応は、「デバイスピクセル比」(“device pixel ratio”) などと呼ばれています。Chrome, Safari, Operaでは、window.devicePixelRatioというプロパティからこの値を取得できます。

長々と書きましたが、スマートフォンで画像がぼやけて見えるのは「デバイスピクセル比が1以上の端末があるから」というのが答えになります。

デバイスピクセル比のばらつきはスマートフォンに限らない

さて、デバイスピクセルとCSSピクセルが1:1でマッチしないのはスマートフォンに限りません。

2012年に発表されたiPadには、Retina Displayが搭載されました。iPhone 4と同じくデバイスピクセル比が2であることから、Safariで表示する画像や新しいiPadに未対応のアプリケーションでは、画像がぼやけて見えます。Androidタブレットでも、高密度のディスプレイを備えた端末が出る可能性はありますし、スマートフォンに限った話ではありません。

デスクトップでも、たとえばWindowsではディスプレイのDPI設定を変更できます。通常は96dpiなのですが、「125％ (120dpi)」を選択すると、Internet Explorer上で1csspxが1.25dpxとして扱われます。そして、ごくまれに120dpiが出荷時に設定されているPCが存在します。

Macでも高解像度モードにすることでデバイスピクセル比を変更できます。ちなみに先ほど紹介したwindow.devicePixelRatioはこの高解像度モードのために実装されています。実装されたのは2006年と今から5年前、iPhone4の登場よりだいぶ前です。

iPhone, iPadがRetina Display化したことにより、MacでもRetina Display搭載の噂が絶えません。Retina Display搭載Macが発売されると、デスクトップでも画像がぼやけて見えることがあるでしょう。