メディアクエリーで指定する際などに困った&いちいち調べるのも飽きたのでまとめ。
iPhone
バージョン | 画面解像度 | アスペクト比 | デバイスピクセル比 |
---|---|---|---|
iPhone 3 系 | 320×480 | 2:3 | 1 |
iPhone 4 系 | 320×480 | 2:3 | 2 |
iPhone 5 系 | 320×568 | 40:71 | 2 |
iPhone 6 | 375×667 | 375/667 | 2 |
iPhone 6 plus | 414×736 | 9:16 | 3 |
iPad
バージョン | 画面解像度 | アスペクト比 | デバイスピクセル比 |
---|---|---|---|
iPad 1 | 768×1024 | 3:4 | 1 |
iPad 2 | 768×1024 | 3:4 | 1 |
iPad mini 1 | 768×1024 | 3:4 | 1 |
iPad 3 以降 | 768×1024 | 3:4 | 2 |
雑感
iPhone 6 plus の登場で、iOS の画面解像度界隈もいよいよカオスな様相を呈してきましたね。ここではスルーしていますが、6 plus は画像の比率が @3× だとか。制作者は泣いていますよ?
その点、iPad シリーズは全て 768×1024 (3:4)。古き良き時代を思い出し、思わず喜びと美しさを感じてしまう数値ですね。この美しい世界が失われないことを願ってやみません。
Android 端末?なにそれおいしいの?
追記(2014-10-08)
- アスペクト比でメディアクエリーを指定する場合のために、数値を横×縦にした上で iPhone 5 系と iPhone 6 のアスペクト比を正確な数値にしました。
- ついでに欲が出てデバイスピクセル比も追加。そうしたら iPad 枠も必要になってしまったので追加。
- max-height とかも一応欲しいかな?などと思ったものの、どんどん項目が増えて収集つかなくなりそうなので、参考リンクを最後に追加。
参考
-
EZ-NET: iPhone や iPad の画面サイズ早見表 : iPhone プログラミング
ステータスバーやツールバーのサイズもありました。助かります。