従来、スマートフォンの横幅といえば 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でデザイン して頂けると助かります。