HOME > > > レスポンシブの設定対応が変わる?iPhone6/iPhone6+の画面サイズを調べてみました

レスポンシブの設定対応が変わる?iPhone6/iPhone6+の画面サイズを調べてみました

レスポンシブの設定対応が変わる?iPhone6/iPhone6+の画面サイズを調べてみました

iPhone6/iPhone6+が発売になりました

iPhone6/iPhone6+が発売されましたね。テレビを見ていると沢山の人達が並んで、発売時間になるとアップルストアースタッフとハイタッチしながらお店に入っている光景が。これを見ていると「あぁ~、新しいapple製品が発売したな~」という感じです。もう見慣れた光景になってきてます。
ちなみに私は5です。
だって変えてそんなに経ってないし、仕事上ほしいけど個人的には全然です。
と言いつつもレスポンシブWebデザインの事を考えると素通りはできません。
ですので、表示されるサイズなどまとめておきます。

iPhone6のまとめ

iPhone6

iPhone6の詳細は以下の通り。

解像度:326ppi
インチ:4.7インチ
画面サイズ:750×1334(px)
制作サイズ:750×1334(px)
表示サイズ:375×667(px)
書き出し:@2x

iPhone6の詳細を見ていくと画面サイズは大きくなっていますが、今まで通り@2xですね。
今までiPhoneも@2xでしたので制作上心配は無いと思います。
ただし320px固定で制作しているものに関しては表示サイズが変わってますので変更が必要かと思います。

iPhone6+のまとめ

iPhone6+

iPhone6+の詳細は以下の通り。

解像度:401ppi
インチ:5.5インチ
画面サイズ:1,080×1,920(px)
制作サイズ:1,242×2,208(px)
表示サイズ:414×736(px)
書き出し:@3x

iPhone6+はちょっとやっかいですね。と言ってもすごい難しいというわけではないのですが、書き出しが@3xになっています。ん?3倍って事?
と言うのも通常で解像度を計算していくと本来のサイズは「1,242×2,208(px)」なんですよね。
それが「1,080×1,920(px)」なんですよね。
これは本来の解像度で表示しようとするとインチ数が5.5じゃ収まりません。
そこで「ダウンサンプリング」という新しい手法で「1,242×2,208(px)」ですよぉ~という事にしておいて「1.15%」小さくして表示するというものです。
iPhone6+対応は今後3倍の画像が必要になってきます。

iPhone6/iPhone6+制作サイズのまとめ

ごにょごにょ書いてますが、
iPhone6は750×1334でデザイン描いて表示は半分のサイズで表示、
iPhone6+は1,242×2,208でデザイン描いて1/3のサイズで表示されますって事になります。
ちょっと思ったのが、自作Lineスタンプとかどうなるんでしょうか。
この内容だとiPhone6+ではすげー小さくなっちゃう?
そこらも調べておかないと作り損になっちゃったらやだわー。

その他のデバイスのモニターサイズはこちらの記事にまとめています。
レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめました

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket