スマートフォンについて備忘録

 

iPhone6/6Plusの登場により、スマートフォンサイトのサイズについて、ちょっと社内も混乱しています。
そこで、調べたことを備忘録的にまとめてみました。

スマートフォンについてきになること。

  • タッチデバイスであること
  • 画面サイズへの対応
  • 画像をきれいにみせたい

タッチデバイスであること

iPhoneとAndroidの違いによるボタンへの考慮

iPhoneとAndoroidでは、タップ時の反応位置がAndroidの方が若干、下方にあるらしいです。
なので、細いリンク領域だと、一つ下のリンクをクリックしてしまった、という経験はないでしょうか?

なので、これを考慮して、ボタンなどのクリック領域を作らなければなりません。

iPhoneの制作ガイドラインでは、タッチのための領域として、44px × 44px以上を推奨しています。

画面サイズへの対応

「デバイスピクセル(dpx)」と「CSSピクセル(csspx)」

CSSやHTMLで、heightやwidthを指定すれば、そのサイズで表示される、というのは常識でしょうか?
PCサイトやスマートフォンの初期頃であれば、問題はないでしょう。

しかし、スマートフォンの高解像度化により、「デバイスピクセル」と「CSSピクセル」という二つの概念を分けて考える必要がでてきました。

今後は、その考えを身近なものとしてとらえていく必要があります。

「デバイスピクセル(dpx)」

デバイスピクセルとは、デバイスが持つ表示のための液晶画面を構成する最少単位の数です。

320×480であれば、

デバイスピクセルを基準にすると、画像がどのように表示されるでしょうか。
下記は、液晶画面の大きさが3.5inchと同じであるiPhone3とiPhone4の場合です。

名称未設定-1_03

※実際には、WEB上で、このようには表示はされません。

表示の写真は、320×320pxの正方形の写真です。

iPhone3では、解像度が320×480pxなので、画像は、画面いっぱいに表示されます。

一方、iPhone4は、解像度が640×960pxです。iPhone3に比べ、液晶画面の大きさは同じでも、解像度は縦、横ともに2倍あります。
従って、iPhone4では、同じ画像でも、縦も横も半分のサイズとなり、結果、1/4のサイズで表示されることになってしまいます。

つまり、デバイスピクセルを基準に表示してしまうと、ものによって、1/4や1/8とどんどん小さく表示されることとなってしまいます。

そうなると、ユーザが高解像度の新機種に買い替えれば、今まで見ていたサイトが、ものすごく小さく表示されてしまい、ユーザにとっては、非常に不便です。

そこで、「CSSピクセル」という概念を改めて理解する必要があるのです。

「CSSピクセル(csspx)」

CSSピクセルは、画面上で表現されるサイズです。
WEBを制作する場合には、この単位を基準に幅や高さなどを指定していくことになります。

PCサイトでは、通常は、OSによるモニターの解像度の設定がCSSピクセルと同じとなります(ブラウザの拡大縮小や個別設定があれば、変わってきます。)。

また、iPhone3の場合は、デバイスピクセル比は1.0です。
デバイスピクセル比は、「デバイスピクセル」と「CSSピクセル」の比です。iPhone3は1.0なので、1:1ということになり、特に「デバイスピクセル」と「CSSピクセル」を分けて考える必要はありません。

img_02

しかし、iPhone4の場合には、デバイスピクセル比は「2.0」なので注意してください。

サイトをクロールしてdevicePixelRatioがわかったものだけですが、下記に一覧にしてみました。

メーカー デバイス名 device
Pixel
Ratio
デバイスピクセル比
画面サイズ 解像度(横) 解像度(縦) csspx(横) csspx(縦) ppi
Apple iPhone 6 Plus 標準 3.0 5.5 inch 1080 1920 414 736 400
拡大 3.0 5.5 inch 1080 1920 375 667 400
iPhone 6 標準 2.0 4.7 inch 750 1334 375 667 325
拡大 2.0 4.7 inch 750 1334 320 568 325
iPhone 5/5c/5s 2.0 4.0 inch 640 1136 320 568 325
iPhone 4/4S 2.0 3.5 inch 640 960 320 480 329
iPhone 2G~3GS 1.0 3.5 inch 320 480 320 480 164
iPad mini 2/3 2.0 7.9 inch 1536 2048 768 1024 324
iPad mini 1.0 7.9 inch 768 1024 768 1024 162
iPad 第3世代~Air2 2.0 9.7 inch 1536 2048 768 1024 263
iPad 初代/2 1.0 9.7 inch 768 1024 768 1024 131
Samsung Galaxy J 3.0 5.0 inch 1080 1920 360 640 440
Galaxy S4 3.0 5.0 inch 1080 1920 360 640 440
Galaxy S III 2.0 4.8 inch 720 1280 360 640 305
Galaxy S II WiMAX 1.5 4.7 inch 720 1280 480 853.3 312
Galaxy S II LTE 1.5 4.5 inch 480 800 320 533.3 207
Galaxy S II 1.5 4.3 inch 480 800 320 533.3 216
Galaxy S 1.0 4.0 inch 800 480 800 480 233
Galaxy Note 3 3.0 5.7 inch 1080 1920 360 640 386
Galaxy Note II 2.0 5.5 inch 720 1280 360 640 267
Galaxy Tab 10.1 LTE 1.0 10.1 inch 800 1280 800 1280 149
Google Nexus 10 2.0 10.1 inch 2560 1600 1280 800 300
Nexus 5 3.0 5.0 inch 1080 1280 360 426.6 338
Nexus 7 (2013 model) 2.0 7.0 inch 1200 1920 600 960 323
Nexus 7 (2012 model) 1.3 7.0 inch 800 1280 615.4 984.6 215
Nexus 4 2.0 4.7 inch 768 1280 384 640 317
Galaxy Nexus 2.0 4.7 inch 720 1280 360 640 315
Nexus S 1.5 4.0 inch 480 800 320 533.3 233
HTC Butterfly 3.0 5.0 inch 1080 1920 360 640 440
Desire HD 1.5 4.3 inch 480 800 320 533.3 216
Desire 1.5 3.7 inch 480 800 320 533.3 252

 ※csspxとppiは表内の数字から計算しているため、公表されている数字や他のサイトの数字と多少ことなる可能性があります。ご了承ください。

csspxの横幅を見てみると、iPhoneでは320px幅、Androidは360px幅辺りがミニマムサイズですので、まだしばらくは、幅320px幅が基準となりそうです。

cssピクセルは、あくまでもフォントサイズやmarginなどの指定には有効ですが、画像をきれいにみせることは、また別問題です。

ppiとは

ちなみにppiとは、pixel per inchの略で、1インチのピクセル数をあらわしており、ディスプレイなどの解像度を示す単位です。
この値が大きければ大きいほど、画素やドットが目立たなくなり、実際の写真のようななめらかで精密になっていきます。

Retinaディスプレイ

iPhoneのRetinaディスプレイの「Retina」は、網膜という意味で、網膜で近くできるといわれている300ppiを超えたという意味を含んでいるようです。

PCモニターの場合

PCのモニターも解像度が高いものがあります。
こちらは、実表示とピクセル数のずれはあっても、OSで調節しているので、WEB制作には影響がないようです。

iPhone6 / 6Plusの拡大モードと標準モード

iPhone6と6Plusには、それぞれ標準モードと拡大モードという二つのモードがついています。

この二つのモードにより、CSSピクセルとデバイスピクセルの関係が若干複雑になっています。

まずは、それぞれの拡大モードと標準モードを簡単にみてみます。

iPhone6

iPhone_6

拡大モード
iPhone5/5sの表示を拡大してみられるモード。4inchから4.7inchに画面サイズが上がっているので、iPhone5/5sに比べ、レイアウトや見た目はそのままに、全体的に17.5%拡大して見ることができます。

iPhone5/5sでちょっと表示が小さいと思った方々には最適ですね。

標準モード
アイコンや文字のサイズは、iPhone5/5sと同じままで、画面が4inchから4.7inchに広がった分、画面内の表示領域が広がります。

アイコンの表示は、横方向では、一つひとつの隙間が広がり、縦は5行から6行になり、4×6の24個のアイコンが表示できます。

iPhone6Plus

iPhone_6Plus

拡大モード
iPhone6の標準モードの表示を拡大してみられるモード。iPhone6が4.7inch、で6Plusは5.5inchなので、約17%拡大して見ることができます。

標準モード
アイコンや文字のサイズは、今までのものと同じです。5.5inchになった文表示領域は広がります。アイコンの表示では、iPhone6の標準モードやiPhone6Plusの拡大モードと同じで、4×6です。

iPhone6 / 6Plusのダウンサンプリング

ここまででてきた「デバイスピクセル」と「CSSピクセル」は、この二つの数字の間では、デバイスピクセル比で表す1.0~3.0の間のきれいな数字で割り切れる関係になっていました。

しかし、iPhone6 / 6Plusでは、解像度が同じでありながら、拡大モードと標準モードという二つのモードがあるために、デバイスピクセル比が単純な数字にはなっていないことがわかっています。

デバイス名 CSSピクセル device
Pixel
Ratio
デバイスピクセル比
補正前
デバイスピクセル
解像度 アスペクト比 画面サイズ ppi
iphone2〜3GS 320×480 1.0 320×480 2:3 3.5  inch 163
iphone4 / 4S 320×480 2.0 640×960 2:3 3.5  inch 326
iphone5 / 5S 320×568 2.0 640×1136 約16:9(※1) 4  inch 326
iphone6 拡大 320×568 2.0 640×1136 750×1334 16:9 4.7  inch 326
標準 375×667
iphone6 Plus 拡大 375×667 3.0 1125×2001 1080×1920 16:9 5.5  inch 401
標準 414×736 1242×2208

 

今までの他の機種では、CSSピクセルにデバイスピクセル比を掛けると、解像度と一致していました。
しかし、iPone6 / 6Plusでは、単純に掛け算しても、iPhone6の標準モード以外は、解像度と一致していません。

例えば、iPhone6の拡大モードが解像度と一致するようにするには、デバイスピクセル比は、「2.34375」と中途半端な数字になります。
iPhone6Plusの拡大モード、標準モードは、それぞれ「2.88」、「2.60869・・・」と、こちらはどちらも中途半端です。

devicePixelRatioは、Javascriptで拾えますので、このような中途半端な数字は扱いづらくなり、デベロッパーにとって、面倒な存在になりかねません。

そこで、iPhone6 / 6Plusでは、理論上のデバイスピクセルと解像度をあわせるために、最終的にわずかに縮小又は拡大をし、表示し、デベロッパーに配慮した数値で構成されていると思われます。