Edited at

iPhone6の時代のviewport設定について

More than 3 years have passed since last update.

従来、スマートフォンの横幅といえば 320px(retina対応で640px) というのが定説でした。

が、iPhone6の普及でそうとも言えなくなってきたのが今日このごろです。


  • iPhone5の横幅は320px(retina対応で640px)

  • iPhone6の横幅は375px(retina対応で750px)

  • ちなみにNexus5の横幅は360px(retina対応で720px)

さてこんな環境で、viewportはどう指定するのがベストなのでしょうか。


前提知識


  • viewportのwidthという値に、device-widthと指定すると、スマホの画面幅 = 表示するwindowサイズ、となる。


  • widthにピクセル値(640px、とか)を入れると、表示幅はそのピクセル数になり、それで画面いっぱいになるように適宜拡大縮小される

  • 古いAndroidでは、widthにピクセル値を指定しても そもそも効かない端末がある

  • 古いAndroidでは、user-scalableという値が1になっていると、拡大縮小のUIが出てきてカッコ悪いので、できればuser-scalable=0を書いておきたい

  • が、同様に古いAndroid端末の一部では、user-scalableを記述すると widthのピクセル指定を無視してきやがる 時がある。

  • widthにピクセル値を指定するパターンでは、普通にやるとシェアボタン等が小さくなってかなしい。


4つのタイプ


320px・余白調整


  • サンプル

  • コンテンツ幅320px

  • デザインは横640pxで作ってもらう

  • retina対応はCSSだけで行う

  • 画面がもっと広い時は余白を増やす

  • 画面がもっと狭い時(※ほぼありえない)はコンテンツ幅自体減らす or トリミング

  • iPhone5・多くのAndroid端末でジャストサイズ

  • <meta name="viewport" content="width=device-width,user-scalable=0">


375px・余白調整


  • サンプル

  • コンテンツ幅375px

  • デザインは横750pxで作ってもらう

  • retina対応はCSSだけで行う

  • 画面がもっと広い時は余白を増やす

  • 画面がもっと狭い時はコンテンツ幅自体減らす or トリミング

  • iPhone6でジャストサイズ

  • <meta name="viewport" content="width=device-width,user-scalable=0">


640px・拡大縮小


  • サンプル

  • コンテンツ幅640px

  • デザインは横640pxで作ってもらう

  • 画像は普通にあてればretina対応になる

  • それを画面幅に合わせて拡大縮小

  • iPhone5・多くのAndroid端末でジャストサイズ

  • <meta name="viewport" content="width=640px">


750px・拡大縮小


  • サンプル

  • コンテンツ幅750px

  • デザインは横750pxで作ってもらう

  • 画像は普通にあてればretina対応になる

  • それを画面幅に合わせて拡大縮小

  • iPhone6でジャストサイズ

  • <meta name="viewport" content="width=750px">


で、どれがベスト?

個人的には、「 375px・余白調整 」で組むのがベストだと思っています。

スマートフォンで想定しうるすべてのサイズを網羅してますし、widthのピクセル値指定が効かない端末がある以上、device-widthを使うのが基本的にはよいのではないかと。

またシェアボタンが小さくなってしまう点についても、スマホでのみscaleをかけるなどの手段で埋め合わせできるのですが、「見えるけど押せない」等々の事例もよくききます。

てなわけでエンジニアの皆さん、基本的には width=device-width を使うようにしましょう!

ほいでもってデザイナのみなさま、スマホサイトは 640pxまでコンテンツ幅減らす想定をしつつ、横750pxでデザイン して頂けると助かります。


参考