-
Notifications
You must be signed in to change notification settings - Fork 1
/
density.html
296 lines (240 loc) · 15.6 KB
/
density.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!doctype html>
<meta charset=utf-8>
<title>スマートフォンと画面解像度・ピクセル密度</title>
<meta name=description content="スマートフォンでWebサイトを見ると、画像がぼけて見えることがあります。この現象に関係する画面解像度とピクセル密度について説明します。">
<link rel=stylesheet href="lilium.css">
<link rel=license href="http://creativecommons.org/licenses/by-nc/3.0/">
<link rel=alternate href="https://github.com/myakura/n/commits/gh-pages.atom" type="application/atom+xml">
<script>
if (!!document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
var sec = document.querySelectorAll('body > section[id]');
var h = document.querySelectorAll('body > section[id] > h2:first-of-type');
var toc = '';
var l = sec.length;
while (l--) {
toc = '<li><a href="#' + sec[l].id + '">' + h[l].innerHTML + '</a>' + toc;
}
var nav = document.createElement('nav');
nav.innerHTML = '<h2>目次</h2><ol>' + toc + '</ol>';
document.body.insertBefore(nav, sec[0]);
}, false);
}
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26017405-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<body>
<h1>スマートフォンと画面解像度・ピクセル密度</h1>
<p>iPhone 4やAndroidスマートフォンで、Webサイトの画像がぼやけて見えることがあります。これには、端末の画面解像度、ピクセル密度、そしてCSSピクセルとデバイスピクセルの扱いといった、いくつかの要因が絡んでいます。
<section id=screen-resolution-varies>
<h2>解像度のばらつくスマートフォン</h2>
<p>スマートフォン端末の画面サイズは端末によりばらばらです。iPhoneの画面は3.5インチと同じですが、Androidスマートフォンは3インチ前半から4インチ後半まで、幅広く分布しています。
<p>画面サイズのばらつきも結構なものですが、解像度はそれよりも相当ばらついています。
<figure id=fig-table-size-resolution>
<table border>
<tr><th>端末
<td>iPhone 3
<td>Galaxy S
<td>Xperia arc
<td>Galaxy S Ⅱ
<td>INFOBAR A01
<td>iPhone 4
<td>Galaxy Nexus
<tr><th>画面サイズ (in)
<td>3.5
<td>4.0
<td>4.2
<td>4.3
<td>3.7
<td>3.5
<td>4.7
<tr><th>解像度 (px)
<td>320 × 480
<td>480 × 800
<td>480 × 854
<td>480 × 800
<td>560 × 960
<td>640 × 960
<td>720 × 1280
</table>
<figcaption>各スマートフォンの画面サイズと解像度</figcaption>
</figure>
<p>iPhone 4はiPhone 3と比べ、縦横それぞれ2倍、計4倍ものピクセル数があります。Galaxy Nexusを始め、2011年秋以降に発売されたハイエンドのAndroidスマートフォンには720 × 1280と、一昔前のネットブックほどもある高い解像度を持った画面を備えています。
<p>これだけ解像度に開きがありながら、端末の大きさは (ばらつきもあるものの) 手でつかめるサイズに収まっています。このため、画面の「ピクセル密度」に大きな違いがでてきます。
</section>
<section id=pixel-density-and-density-groups>
<h2>ピクセル密度と密度グループ</h2>
<p>ピクセル密度とは、主に1インチあたりのピクセル数をいうもので、DPI (dot per inch) やPPI (pixel per inch) などと呼ばれています。
<p>ピクセル密度が高いほど、面積あたりの解像度が高くなります。デスクトップではだいたいピクセル密度が同じ (100〜120くらい) なので、一般的に解像度が高くなるにつれ画面も大きくなります。反対に、スマートフォンは画面サイズが (だいたい) 同じなので、解像度が高くなるにつれ1ピクセルの大きさが小さくなり、画面が細密になります。
<p>iPhone 4のRetina displayは解像度が640×960と、iPhone 3の解像度 (320×480) の4倍もあります。しかし、画面の大きさは同じ3.5インチです。ですので、iPhone 4のピクセル密度はiPhone 3の2倍になります。
<p>次の表は、いくつかの端末の解像度とピクセル密度を並べたものです。
<figure id=fig-table-density>
<table border>
<tr><th>端末
<td>iPhone 3
<td>Galaxy S
<td>Xperia arc
<td>Galaxy S Ⅱ
<td>INFOBAR A01
<td>iPhone 4
<td>Galaxy Nexus
<tr><th>画面サイズ (in)
<td>3.5
<td>4.0
<td>4.2
<td>4.3
<td>3.7
<td>3.5
<td>4.7
<tr><th>解像度 (px)
<td>320 × 480
<td>480 × 800
<td>480 × 854
<td>480 × 800
<td>560 × 960
<td>640 × 960
<td>720 × 1280
<tr><th>ピクセル密度 (dpi)
<td>163
<td>233
<td>233
<td>217
<td>298
<td>326
<td>312
</table>
<figcaption>各スマートフォンの解像度とピクセル密度</figcaption>
<span class=note>ピクセル密度は端末の製造/販売企業のWebサイトから、なければ端末のスペックから算出しています。</span>
</figure>
<p>表を見ていると、ピクセル密度が 1) 160前後, 2) 210〜240, 3) 300〜320 と、多少の振れ幅があるもののおおよそ3つに分かれていることに気づきます。
<p>このグループは「密度グループ」と呼ばれます。Androidでは解像度やピクセル密度など、<a href="http://developer.android.com/guide/practices/screens_support.html#qualifiers">画面の性質でグループ分け</a>がされています。Androidで用意されている密度グループは次のとおりです。
<figure id=fig-table-density-groups>
<table border>
<tr><th>グループ名
<td>ldpi
<td>mdpi
<td>hdpi
<td>xhdpi
<tr><th>ピクセル密度
<td>120 dpi
<td>160 dpi
<td>240 dpi
<td>320 dpi
</table>
<figcaption>Androidの密度グループ</figure>
</figure>
<p>iPhoneを当てはめると、iPhone 3までがmdpi、iPhone 4からはxhdpiに区分けされそうです。日本で流通しているAndroidスマートフォンの多くはhdpiに属するでしょうが、最近のHD解像度の端末はxhdpiに属しそうです。
<p class=note>IS05やXperia ray, INFOBAR A01/C01などはグループ上hdpiに属しています。しかし、画面サイズが小さいことからピクセル密度が300dpi前後と、xhdpiに近くなっています。小型で高解像度な端末が増えると、所属するグループだけでは画面の精細さを判断するのは難しくなるでしょう。
</section>
<section id=websites-in-high-dpi-screen>
<h2>ピクセル密度の違いが見た目に影響する</h2>
<p>さて、ピクセル密度のばらつきによって、すこし困ったことが起こります。密度の低い環境に合わせて作られたコンテンツの見た目が、密度の高い環境で良く見えない可能性が出てくるのです。
<p>iPhone 4以降のiPhoneや、AndroidスマートフォンでWebサイトを表示すると、画像がぼやけて見えることがあります。
<figure>
<img src=density/asahicom_retina.png style="border-radius: 6px">
<figcaption>asahi.com miniをiPhone 4で表示したもの。ロゴや「トップ」「写真」といった画像の文字が、その下にある「ニュース」などのテキストと比べて荒く表示されているのがわかる。</figcaption>
</figure>
<p>iPhone 4のRetina displayでは文字の綺麗さなどをうたっていますが、画像が綺麗に見えないのはどうしてでしょうか。ここで出てくるのが、デバイスピクセルとCSSピクセルという、2種類の「ピクセル」です。
</section>
<section id=device-and-css-pixels>
<h2>「デバイスピクセル」と「CSSピクセル」</h2>
<p>Webデザインにおける「ピクセル」は、ほとんどの場合「CSSピクセル」を指します。一方、画面のピクセルは「デバイスピクセル」と呼ばれたりします。
<p class=note>以下、CSSピクセルを「csspx」、デバイスピクセルを「dpx」と表記することがあります。
<p>iPhone 4はiPhone 3に比べて縦横2倍、計4倍のデバイスピクセルを持ちます。今までより広い範囲を表示できるようになったわけですが、実際にそう表示してしまうと困ります。画面の大きさが同じだからです。たとえば、320×480ピクセルの画像をそのまま表示すると、iPhone 3では画面いっぱいになりますが、iPhone 4では画面の1/4しか表示されません。Webページでも同様なことが起こると、読めたものではなくなります。
<p>これを解決するために、iPhone 4では、ひとつのCSSピクセルをふたつのデバイスピクセルで表しています。1csspx = 2dpxですから、<code>border-width: 2px</code>は4dpxの線で描画されることになりますし、「100px × 100px」な画像は200dpx × 200dpxで描画されます。
<p>画像編集ソフトで、画像を100％以上に引き伸ばすと、画像がぼけて見えます。高解像度のディスプレイで画像がぼける理由は、これと同じ事です。一方、ベクターで計算されるもの (アウトラインフォント、SVGのパスなど) は描画される箇所のデバイスピクセルが細かいので、精細に表示されます。画像がぼやける一方でフォントが綺麗なのはこのためです。
<p>Androidスマートフォンでは端末の属する密度グループごとに、デバイスピクセルとCSSピクセルのマッピングが異なります。ひとつのデバイスピクセルをひとつのCSSピクセルで表示するのは、mdpi (160dpi) に属する端末です。このmdpiにおける「1ピクセル」は「解像度非依存ピクセル (“density-independent pixel”)」と呼ばれ、“dp”などと表記されます。
<p>mdpiを基準にすると、hdpi (240dpi) は160dpiの1.5倍ですから、1csspx = 1.5dpxとなります。xhdpi (320dpi) は2倍なので、1csspx = 2dpxとなります。
<p>現在使われているAndroidスマートフォンの多くはhdpiに属すので、<code>border-width: 2px</code>は3dpxで表されることになります。1csspxは1.5dpxと整数値で割り切れないため値が丸められます。1csspxで指定された線が消える・細く見えることがあるのは、このためです。
<p>この、デバイスピクセルとCSSピクセルの対応は、「デバイスピクセル比」(“device pixel ratio”) などと呼ばれています。Chrome, Safari, Operaでは、<code>window.devicePixelRatio</code>というプロパティからこの値を取得できます。
<figure id=fig-table-dpxratio>
<table border style="text-align: center">
<tr><th>端末
<td>iPhone 3
<td>Galaxy S
<td>Xperia arc
<td>Galaxy S Ⅱ
<td>INFOBAR A01
<td>iPhone 4
<td>Galaxy Nexus
<tr><th>解像度 (px)
<td>320 × 480
<td>480 × 800
<td>480 × 854
<td>480 × 800
<td>560 × 960
<td>640 × 960
<td>720 × 1280
<tr><th>密度グループ
<td>160
<td>240
<td>240
<td>240
<td>240
<td>320
<td>320
<tr><th>dpx比
<td>1
<td>1.5
<td>1.5
<td>1.5
<td>1.5
<td>2
<td>2
</table>
<figcaption>各スマートフォン端末の画面解像度、ピクセル密度、密度のカテゴリとデバイスピクセル比</figcaption>
</figure>
<p>長々と書きましたが、スマートフォンで画像がぼやけて見えるのは「デバイスピクセル比が1以上の端末があるから」というのが答えになります。
</section>
<section id=dpxratio-on-tablet-desktop>
<h2>デバイスピクセル比のばらつきはスマートフォンに限らない</h2>
<p>さて、デバイスピクセルとCSSピクセルが1:1でマッチしないのはスマートフォンに限りません。
<p>2012年に発表されたiPadには、Retina Displayが搭載されました。iPhone 4と同じくデバイスピクセル比が2であることから、Safariで表示する画像や新しいiPadに未対応のアプリケーションでは、画像がぼやけて見えます。Androidタブレットでも、高密度のディスプレイを備えた端末が出る可能性はありますし、スマートフォンに限った話ではありません。
<p>デスクトップでも、たとえばWindowsではディスプレイのDPI設定を変更できます。通常は96dpiなのですが、「125％ (120dpi)」を選択すると、Internet Explorer上で1csspxが1.25dpxとして扱われます。そして、ごくまれに120dpiが出荷時に設定されているPCが存在します。
<p>Macでも高解像度モードにすることでデバイスピクセル比を変更できます。ちなみに先ほど紹介した<code>window.devicePixelRatio</code>はこの高解像度モードのために実装されています。実装されたのは2006年と今から5年前、iPhone4の登場よりだいぶ前です。
<p>iPhone, iPadがRetina Display化したことにより、MacでもRetina Display搭載の噂が絶えません。Retina Display搭載Macが発売されると、デスクトップでも画像がぼやけて見えることがあるでしょう。
</section>
<!--
<section id=>
<h2>解像度・ピクセル密度の違いに対処する</h2>
<p class=XXX>別におこしたほうがいい気もする。タブレットも含める？
<ul class=XXX>
<li><img width>
<li>viewport
<li>device-pixel-ratio (bg-size)
<li>target-densitydpi
<li>svg
<li>css
</ul>
</section>
<section>
<h3>width/height属性とbackground-sizeプロパティの利用</h3>
<p><code>img</code>要素には<code>width</code>, <code>height</code>という、画像の表示幅（高さ）をピクセルで指定する属性があります。CSSにも同名のプロパティや、<code>background-size</code>など大きさを指定するプロパティがあります。
<p>大きな解像度の画像を用意して、これらの属性もしくはプロパティでその表示幅（高さ）を指定すると、ブラウザはその寸法にあわせ画像を拡大縮小し表示します。
<figure>
<pre><code><img src=image_wxh.png width= height=></code></pre>
<figcaption>大きな画像をwidth/height属性から指定して</figcaption>
</figure>
<p>ANAのiPhone, iPad用Webサイトでは、この方法が使われています。ヘッダやアイコンに表示サイズ（ピクセル）よりも大きな画像を用意し、
<p>ただし、大きな画像を用意しますから、ファイルサイズが増えてしまいます。ネットワークの品質がよくないとダウンロードに時間がかかるでしょう。また、画像を縮小して描画するので、もしかするとパフォーマンスに影響するかもしれません。
<p>ただ、<code>background-size</code>などは除きますが、古くからある属性・プロパティですから、変なバグに遭遇する可能性は低そうです。
</section>
<section>
<h3>viewport</h3>
<p>あらかじめ大きな解像度でつくったページを
<p>640の幅でつくったものを縮小する
<p>デスクトップでは有効にされていないので、幅が640px想定になります。見た感じがだいぶ違うでしょう。Photoshopなどのカンプ作成時も、コントロールが不自然に小さくなるなど、。。
</section>
-->
<footer>
<address>by <a rel=author href="http://profiles.google.com/117261322300109492957">Masataka Yakura</a></address>
<p class=update>Update: June 2, 2012
</footer>