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

  • 227
    Like
  • 4
    Comment
More than 1 year has 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でデザイン して頂けると助かります。

参考