Help us understand the problem. What is going on with this article?

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

More than 5 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でデザイン して頂けると助かります。

参考

fnobi
面白法人のテクニカルディレクター 兼 作曲家 兼 ドルヲタ ⌨️ http://github.com/fnobi 🎼 http://soundcloud.com/fnobi
http://fnobi.com/
kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム
http://www.kayac.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away