モノトーンの伝説日記

Apex Legends, Splatoon, Programming, and so on...

<mini> iPhone 6/Plus が発売されたので… 【解像度周り一覧にしてみた】

 いろいろ振り返る画面サイズ。

 新たな概念 (iPhone 6 Plus にて) が加わってくる。それはダウンサンプリングだ。今のところ iPhone 6 Plus だけであるがダウンサンプリングがかかわってくるということは、それを視野に入れた設計もできる。例えば、ダウンサンプリング後のピクセルを想定して画像のデータを減らす、ということもできる。いろいろあるので、久々に見ていこうではないか。

機種 サイズ (inch) D解像度 D比率 仮想解像度 描画解像度 DS比率*1 D密度 (ppi)
Xperia ray 3.3 480 x 854 1.5 320 x 569 480 x 854 1.0 296.9
iPhone/3G/3GS 3.5 320 x 480 1.0 320 x 480 320 x 480 1.0 164.8
iPhone 4/4s 3.5 640 x 960 2.0 320 x 480 640 x 960 1.0 329.7
Xperia SX 3.7 540 x 960 1.5 360 x 640 540 x 960 1.0 297.7
iPhone 5 4.0 640 x 1136 2.0 320 x 568 640 x 1136 1.0 326.0
Xperia arc 4.2 480 x 854 1.5 320 x 569 480 x 854 1.0 233.3
Xperia Z1f 4.3 720 x 1280 2.0 360 x 640 720 x 1280 1.0 341.5
Lumia 925 4.5 768 x 1280 2.0 384 x 640 768 x 1280 1.0 331.7
AQUOS PHONE 4.5 1080 x 1920 3.0 360 x 640 1080 x 1920 1.0 489.5
Xperia A 4.6 720 x 1280 2.0 360 x 640 720 x 1280 1.0 319.3
iPhone 6 4.7 750 x 1334 2.0 375 x 667 750 x 1334 1.0 325.6
Lumia 930 5.0 1080 x 1920 2.68 403 x 659 1080 x 1920 1.0 440.6
Xperia Z 5.0 1080 x 1920 3.0 360 x 640 1080 x 1920 1.0 440.6
iPhone 6 Plus 5.5 1080 x 1920 3.0 414 x 736 1242 x 2208 1.15 400.5
??? 5.5 1080 x 1920 2.4 450 x 800 1080 x 1920 1.0 400.5
isai FL 5.5 1440 x 2560 4.0 360 x 640 1440 x 2560 1.0 534.0
Lumia 1520 6.0 1080 x 1920 2.2 491 x 873 1080 x 1920 1.0 367.2

(追記: ※ Windows Phone は 96 dpi が基準なので、2.0 とかではなく、1.875 と表記すべきかもしれない。ちなみに @-ms-viewport { width: device-width; } を指定。)

 スマフォ業界の革命ですね。新たなパラメーターが加わりました。ダウンサンプリング比率です。仮想スクリーンに描画し、そのあとダウンサンプリング。そもそも iPhone 6 Plus OS 全体で内部で 1242x2208 という仮想スクリーンを持っている気がします。このパネル、特注すればよかったのに…

 というか、iPhone、整数比率捨てるぐらいなら 2.5 スケーリングとか導入すべきだった。ピクセルという概念が完全に捨ててしまった iPhone 6 Plus。うーん、どうなんだろう… 少なくとも俺は Windows 派で、やっぱりダウンサンプリングって無駄な処理だと思うんすよ。Windows は座標演算でスケーリングかけたりして、最終レンダリングはスクリーンと一致を採用してて、やっぱりその方法がいいなぁ、って思ってしまいます。

 とりあえず、スマフォは 320~414 px は最低のサポートってことで、まあ Windows ストア アプリ的に考えると narrow layout mode は ~500px というところでいいかと思います。PC でもスナップ表示したとき、やっぱり画面に最適になるとうれしかったりするので、このあたりは Web デザインする上で必須ですね。

 横画面に関しては一覧を見ていただくと、480~736 px という感じですか。ただまあ、3:2 の iPhone でコンテンツ詰め込むとごちゃごちゃになるので、このあたりはシングルカラムでいいんじゃないかと。だからやっぱり 500 px が一つの基準で、もう一つが 800 px ぐらいじゃないですかね。

 自分だとこんな感じ。

  • ~500px: 狭いレイアウト、基本シングルカラム
  • ~800px: 広いレイアウト、基本ダブルカラム
  • ~: 画面サイズに合わせて配置。基本的に 1366 px ぐらいが最大横幅を想定。それ以上は max-width で固定

 こんな感じかなぁ。しかし案外かわらないな。そもそも Android の isai FL とか dpr = 4 じゃなくて 3 にしてもっと情報量増やしてもいい気がするけどどうなんだろう。画面デカクなってるだけで情報量変わらない (変えられない) のはちょっと辛いかも。画面サイズに応じていろいろごにょれたらいいな、って思ってしまう私なのでした。

 以上!

*1:ダウンサンプリング比率