スマートフォン向けサイトのViewport設定まとめ
公開日：2014年8月20日
最終更新日：2015年8月10日
スマートフォンサイトの制作で重要になるのが、ブラウザの表示設定を行う Viewport(ビューポート)というmeta要素です。Viewportの設定次第でWebページの見た目とユーザーの使い勝手が変わるので、サイトの性質に合わせて適切に設定する必要があります。
Viewportを設定しない場合は、スマートフォンのブラウザは横幅980pxでWebページを表示します。これはlandscapeモードにしても同様です。
Viewport設定のないPC向けサイトなどを閲覧した場合は、スマートフォンの画面に画像や文字がかなり小さく表示されることになります。
【コンテンツ】
Viewportの設定項目と書式
Viewportでは以下の設定ができます。
- ブラウザにおける表示領域の幅と高さ
- ページロード時のズーム倍率
- ピンチイン/ピンチアウト時の倍率の上限と下限
- ユーザーによるピンチイン/ピンチアウトの可否
書き方としては、HTMLのhead要素内に以下の書式で記述します。
|
1 |
<meta name="viewport" content="[プロパティ１]=[値１], [プロパティ２]=[値２], [プロパティ３]=[値３]"> |
content属性にプロパティを複数指定する場合は、カンマ「,」で区切ります。プロパティの順番に制約はありません。
指定できるプロパティは以下になります。
ただし記事作成時点での Mobile Safari を基にして作成した表ですので、ブラウザにより若干異なる部分があるかもしれません。
| プロパティ | 説明 | 指定範囲 | デフォルト値 |
|---|---|---|---|
| width | 表示領域の幅 | 200～10000 ※単位はpx "device-width"を指定すると端末の幅に合わせる |
980 |
| height | 表示領域の高さ | 233～10000 ※単位はpx "device-height"を指定すると端末の高さに合わせる |
widthと端末のアスペクト比から自動算出 |
| initial-scale | ページロード時のズーム倍率 | minimum-scale ～ maximum-scale | 表示領域にページがフィットするように自動算出 |
| minimum-scale | ズーム倍率の下限 | 0～10.0 | 0.25 |
| maximum-scale | ズーム倍率の上限 | 0～10.0 | 5.0 |
| user-scalable | ユーザーによるズーム操作の可否 | yes: 許可する no(あるいは0): 許可しない |
yes |
各プロパティの設定ガイドライン
width
スマートフォン専用サイトでは、「width=device-width」を指定するので問題ありません。
有名サイトではこれ以外の設定を見たことがありません。
数値を指定するケースとしては、PC向けに制作したページ幅が固定されているサイトを、デザインを崩さずにスマートフォンでも表示したいときなどです。
注意点としては、widthとinitial-scaleを同時に設定すると、お互いに矛盾することです。
iOS5以前ではwidthが優先されましたが、iOS6以降ではinitial-scaleが優先されwidthに指定した値は無効になります。
また、Mobile Safari やモバイル版Chromeでは、バージョンにより「width=device-width」以外を指定すると、フォントサイズのバランスが崩れることがあります。
height
通常はブラウザの計算にまかせ、設定する必要はありません。
initial-scale
デフォルトでは表示領域にページがフィットするように算出されますが、スマートフォン向けに最適化されたサイトなら、「initial-scale=1.0」を指定するので問題ありません。
minimum-scale/maximum-scale
ユーザーが拡大縮小できる倍率の範囲を設定します。またinitial-scaleの指定範囲にもなります。
minimum-scaleとmaximum-scaleの両方を設定する必要はなく、どちらか一方だけ設定しているサイトもたくさんあります。
minimum-scaleは、スマートフォンサイトでは "1.0" 以外を指定することはまずないでしょう。
PC向けサイトのような横幅の広いページでは、minimum-scaleに大きな値を指定しているとページ全体を表示できなくなります。デフォルトの "0.25" であればまず大丈夫です。
maximum-scaleも、スマートフォンサイトでは "1.0" 以外を指定することはまずないでしょう。デフォルトでは "5.0" になっており、それほどの倍率が必要とも思えないので制限することも有りです。
user-scalable
ここに "no" を指定していると、ピンチイン/ピンチアウトのズーム操作ができなくなりますので、ユーザビリティの点で大きな問題となる可能性があります。
スマートフォン用にレイアウトやフォントサイズを最適化したデザインでも、ユーザーによっては拡大して見たい人もいます。
有名サイトでもズーム禁止にしているケースはたくさんありますが、せっかくのスマートフォン機能を使えなくするのは、慎重に判断する必要があるでしょう。
なお、「user-scalable=no」でなくても、minimum-scale/maximum-scaleの設定で結局はズームできないようになっている場合もあります。
Viewport設定例
スマートフォン専用サイトでズーム禁止
Yahoo、Amazon、楽天はこのパターンになっています。
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
1.0倍以上の拡大を許可
日経新聞やGoogleサイトの多くはこのパターンになっています。
「minimum-scale=1.0」は、ない場合もあります。
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> |
PC向けサイトで全体を表示し1.0倍までの拡大を許可
PC向けにデザインしたサイトを、とりあえずスマートフォンでも表示したいときに、私はこの設定を良く使います。
widthに数値を指定することも考えられますが、ブラウザによってはフォントサイズがおかしくなります。
|
1 |
<meta name="viewport" content="width=device-width, maximum-scale=1.0"> |
スポンサーリンク
