新しいiPhoneの解像度とCSSピクセル幅を考える
そろそろSafari 8?のベースになるWebKitのブランチが切られるかなと思って待っていたら月末になってしまった。ネタがないのでiPhoneの噂話でもしよう。
新iPhoneの画面解像度は？
まず、確かな情報筋（）によると、4.7インチと5.5インチのモデルが出ると。
4.7インチは750×1334らしい。現行iPhoneのディスプレイと同じ326ppiなものを4.7インチにするとこうなると。5.5インチだとフルHDな1080×1920らしい。こちらは新しいディスプレイで401ppiだって。
さて、5.5インチについてはまだわかるんだけど、4.7インチの謎解像度はないのではないかと思っている。というのはデバイス非依存ピクセルを想像すると2つのモデルで幅が異なる可能性が高いから。同じディスプレイが使えるという製造観点での利点や理由はあれど、アプリとかの観点から考えると煩わしすぎるわけですよ。
CSSピクセルで見るiPhoneの横幅
デバイス非依存ピクセル…面倒なのでCSSピクセルにしとこう（CSSに限った話じゃないけど）。あ、あとviewportはwidth=device-widthのときね。よし。
ピクセル密度や画面解像度の変更はあれど、iPhoneは登場時から横幅320csspxを維持してきた。iPhone 3Gまでは320×480。iPhone 4ではRetina displayとして640×960としたものの、レイアウト面でアプリやWebコンテンツへの影響がないように、1csspxを2dpxで描画するようにした。CSSピクセル的には、320×480と変わらない。
iPhone 5では640×1136になった。これまで3:2だったアスペクト比が変わって16:9（くらい）になった。HDなコンテンツをレターボックスなしで見られるようにするためだろうけど、幅320というCSSピクセルは変えずに高さを増やした。結果として320×568と収まりが悪い感じになった。
Androidはだいたい幅360
最近のAndroidスマートフォンの多くは、◯◯HDみたいな解像度が多い。HDを冠するだけあってHDコンテンツとの相性がよいんだろう。最初はたぶんqHDで540×960。次にHDで720×1280。フルHDのも出てきて1080×1920。2Kなんてのも発表されて1440×2560。もうよくわかんなくなるよね。
解像度はばらけているけど、ピクセル密度がそれぞれ違うので、CSSピクセル的にはこれらすべてが360×640になる。Androidでも一貫しているところはあったんだよ！！
さて、横幅が360csspxというの、iPhoneに比べて40csspxも余裕がある。つくりによるけど、iPhoneでは詰まったWebサイトもAndroidでは横にちょっと余裕がある。◯VGAな端末だと横幅320csspxだけど、iPhoneと同じなのでそんな影響はない。
Nexus 4はなぜだか768×1280→幅384csspxという謎仕様だったけれど忘れとこう。見た目もアスペクト比もよいと思うけど、たぶん悲しみしか生んでない。
iPhone 6は幅360になるのか
iPhone 6のうわさスペックを見ると、4.7インチモデルは幅750、5.5インチモデルは幅1080。ピクセル密度から考えると、CSSピクセルは4.7インチモデルでは幅375、5.5インチモデルでは幅360となる。
まず、320というこれまでの幅がでてこない。360以上になっている。これまで頑なに320を維持していたのに、それがついに変わるのか。
Webコンテンツに関しては、ゲームとかだとけっこう辛いのかな。ただ静的なWebサイトなら最近のAndroidを考えているならそんな問題ない気がする。考えてなくてもたぶんそんな問題は出ないんじゃあないか。
影響があるのはやっぱりアプリだろう。これまでみたくレターボックスが導入されると、edge-to-edgeなデザインが生きない。拡大モードを使うと、360÷320＝1.125なので、うっすらぼける。Retina displayほどではないだろうけど、ちょっと影響が出てくる。
ただ、iOS7での大きなテイスト変更もあるので、アプリはいずれアップデートしないといけない。また、その新しいテイストだと画像とかよりテキストを推している感じがするので、拡大によるぼけはけっこう避けられるのかもしれない。なので幅360へのスイッチは、それなりにタイミングがいいのかもしれない。
ほんとに4.7インチ？
すっかり360前提で話をしてしまった。でもやっぱり、4.7インチモデルとやらから導かれる幅375csspxというのは考え難い。異なるモデルで幅が違うとかね。というわけで、もし幅を変えるのであれば2モデルとも幅360csspxにそろえるのではないか。
4.7インチという話はリークされたケースから来ているらしい。それくらいの大きさで◯HDなものだと解像度はHD、720×1280が適当かなあ。これでPPIを計算すると312くらい、これまでの326ではない。
逆にこれまでの326を使って幅720とした場合、大きさが4.5インチ程度になる。言われている4.7インチより0.2インチ小さい。5mmくらい、さすがに誤差とはいえないか……
ピクセル密度比が下がることはRetina display的にどうなのだろうか。では3xの新しいディスプレイになったとする。想定される解像度は1920×1080。これで4.7インチな端末は…HTC Oneがそうらしい。ふーむ。
まとめ（られてない）
噂されてる解像度がほんとなら、これまで維持してきた幅320csspxがついに終わる。狭くなるわけじゃないのでレイアウト崩れは想像しづらいけど、アプリ、とくにゲームとかは大変そう。
ただ4.7インチモデルの噂においては解像度の予測が疑わしい。幅360ベースになおすと326ppiのディスプレイは使えない。4.7インチモデルではピクセル密度比3、5.5インチモデルでは4になったりするかもしれない。
まあ、わかんないってことで。幅は360になるんじゃないかとは思うけど。
