スマートフォン向けサイトのViewport設定まとめ

スマートフォンサイトの制作で重要になるのが、ブラウザの表示設定を行う Viewport(ビューポート)というmeta要素です。Viewportの設定次第でWebページの見た目とユーザーの使い勝手が変わるので、サイトの性質に合わせて適切に設定する必要があります。

Viewportを設定しない場合は、スマートフォンのブラウザは横幅980pxでWebページを表示します。これはlandscapeモードにしても同様です。
Viewport設定のないPC向けサイトなどを閲覧した場合は、スマートフォンの画面に画像や文字がかなり小さく表示されることになります。

【コンテンツ】

  1. Viewportの設定項目と書式
  2. 各プロパティの設定ガイドライン
  3. Viewport設定例

Viewportの設定項目と書式

Viewportでは以下の設定ができます。

  • ブラウザにおける表示領域の幅と高さ
  • ページロード時のズーム倍率
  • ピンチイン/ピンチアウト時の倍率の上限と下限
  • ユーザーによるピンチイン/ピンチアウトの可否

書き方としては、HTMLのhead要素内に以下の書式で記述します。

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.0倍以上の拡大を許可

日経新聞やGoogleサイトの多くはこのパターンになっています。
「minimum-scale=1.0」は、ない場合もあります。

PC向けサイトで全体を表示し1.0倍までの拡大を許可

PC向けにデザインしたサイトを、とりあえずスマートフォンでも表示したいときに、私はこの設定を良く使います。
widthに数値を指定することも考えられますが、ブラウザによってはフォントサイズがおかしくなります。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ