iPhone6 / iPhone6 Plusの画面サイズによるデザイン変更に関して
iPhone6 / iPhone6 Plus発表されましたね。各キャリアの料金も発表されて発売日が待ち通しい。
「大きさ以上に大きく進化」はいいですが、制作会社としては頭を抱える事態でもあります。それは、またもやスクリーンサイズが変更されました。弊社でも原則RWD(レスポンシブウェブデザイン)で制作しておりますが、また切り方を工夫しなくてはいけないのでしょうか？
ソリッドデザインやリキッドデザインでは正直今後の制作不可が非常に大きくなる他、レスポンシブでもUser Agent型の場合は倍ゲームで構築内容が増えていってしまいます。
やはり今後はMedia Query型のレスポンシブ設計が主流になってくると思われます。
iPhone6 / iPhone6 Plusの画面サイズ
| 端末名 | iPhone6(4.7inch) | iPhone6 Plus(5.5inch) |
| 横幅 × 縦幅(Retina) | 750px × 1334px | 1080px × 1920px |
| 横幅 × 縦幅(実質解像度) | 375px × 667px | 414px × 736px |
| 画素密度(ppi) | 326 ppi | 401 ppi |
メディアクエリの記述は以下の条件をクリアしていれば良さそうです。
iPhone 6 Media Query
Portrait(縦) & Landscape(横)
@media only screen
and (device-height: 667px),
only screen
and (device-width: 667px) {
}
Landscape(横)
@media only screen
and (device-width: 667px) {
}
Portrait(縦)
@media only screen
and (device-height: 667px) {
}
iPhone 6 Plus Media Query
Portrait(縦) & Landscape(横)
@media only screen
and (device-height: 736px),
only screen
and (device-width: 736px) {
}
Landscape(横)
@media only screen
and (device-width: 736px) {
}
Portrait(縦)
@media only screen
and (device-height: 736px) {
}
とまぁ、ここまで見てみると、従来のdevice-width:768px前後での切り分けでとりあえずレイアウト崩れは免れそうです。
良かった（一安心）
ただし、解像度のことや固定領域を使った要素などはまだまだあるため、今後も追って対応をしていかなければいけません。
そんな毎度お騒がせなアップルさんの新商品、iPhone6 / iPhone6 Plusの価格表もまとめてあるので、合わせてこちらもご覧ください♡
iPhone 6 / iPhone 6 plus キャリア別[docomo,au,softbank]端末料金徹底比較
Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)
