ブログ

iPhone 6/iPhone 6 Plusのデバイスサイズについて

あくまでも、Safariのブラウザサイズという前提ですが、iPhone 6/iPhone 6 Plusのデバイスサイズを調べてみました。

スマートフォン対応は縦横両方の対応が必要です

【CSS】iPhone 6 / 6 Plusの画面にのみ効かせるスタイルシートの書き方。という記事が、正しい内容ではないのでちょっと書いてみたところもあります。

この記事の場合には、「縦幅」のみ記載してあり、おまけにiPhone 6 Plusの画面サイズが記載されています。
実際には、iPhone 6とiPhone 6 Plusは画面サイズは違います!

さらに設定によって画面サイズが違う

ちょっと待て、ということでiPhone 6のサイズは書いてあるけど、iPhone 6 Plusのサイズが書いていないので急遽Apple Store表参道でチェックしてきました。

そのスマートフォンサイト、大丈夫?

うちでは、もっぱらレスポンシブWebデザインなのであまり影響はないのですが、「横幅は320pxもしくは640pxでデザインする」のが主流でした。つまり、iPhone 5SまでのiPhone画面サイズの2倍ですね。

幅固定で作る制作者はそれほどいないはずですが、最大幅が「640px」で想定して作っている制作者は多いのではないでしょうか?
しかし、iPhone 6 Plusのランドスケープ(横向き)の画面サイズは640pxを超えた大きさです。
スライダーなどで画像サイズを640pxなんかにしていたら、どうなるのでしょう?さて。

まとめ

iPhone 6/iPhone 6 Plusをまだ購入していなかったため、画面拡大モードまでは気がつかなかったです。
もしかして、噂になっているiPadにも画面拡大モード、搭載されるかもですね。

デバイスサイズは、海外のサイトでいろいろ調べたものがあるので、見てみるのもありかもしれません(日本のデバイスは掲載されていないことが多いですが)。

さすがに画面拡大モードのときまでは気がつかなかったです。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。