投稿日：2014年12月12日｜最終更新日: 2018年9月30日

viewportメタタグの設定

viewport（ビューポート）とは、「表示領域」です。

viewportのviewportメタタグ

前回メディアクエリの指定をして、スマートフォン画面にスタイルを対応させることについて説明しました。

しかし、viewportメタタグを指定しなければ、メディアクエリを記述しても幅が広いまま表示されてしまいます。

　viewportメタタグとは、スマートフォンでWebサイトを開くとき、コンテンツの表示をコントロールするコードです。
以下のようなコードをHead内に記述します。

<head>
<meta name=viewport content="width=device-width, initial-scale=1.0">
</head>

viewportメタタグはAppleがiOS safari向けに実装しました。
その後AndroidやOperaでも使われ、実質的に「標準」となりました。

PCのブラウザでは、ブラウザウインドウの表示領域がviewportになります。
赤い枠で囲った部分が「デスクトップブラウザのviewport」です。

スマートフォンのviewportは、デバイスの画面サイズに限らず、コンテンツのサイズによって決まります。
つまり、設定によってはウィンドウサイズより多きときもあれば、小さいときもあります。

※viewport指定なしだと、デスクトップの表示のままになる。

　viewportには、2つの「領域」の定義が存在します。

　表示領域＝viewportです。
横幅960px、縦2000pxのサイトがあった場合、スマートフォンではそのまま960px×2000pxです。

　iPhone5 safariの場合、Viewportに関係なくステータスバーとアドレスバーの領域を除き、320px×444pxです。

　viewportの幅を、デバイスの幅の320pxにすることにより、サイトをすべて表示することができます。

プロパティ	詳細	使用できる値	デフォルト値
width	viewportの幅（pxで指定す）	200～10,000pxまたはdevice-width（デバイスの幅）	980px
height	viewportの高さ（pxで指定す）	223～10,000pxまたはdevice-height（デバイスの高さ）	無し
initial-scale	ページが読み込まれる際のViewportの倍率	0～10.0	Viewportが閲覧可能領域に入るように自動計算
minimum-scale	Viewportの最小倍率	0～10.0	0.25
maximum-scale	Viewportの最大倍率	0～10.0	5.0
user-scalable	ズーム機能のオン・オフを設定	yes/no	yes

　viewportの「initial-scale」を1.0倍にすると、iOS5以前ではバグが発生します。
iPhoneを縦から横に向きを変えたとき、表示が1.5倍になり閲覧可能領域からはみ出てしまいます。
iOS6から修正されました。

　iOS5以前のような古いiOSにも対応できるベストなコーディングは、今のところありません。
ただ、以下のように指定すればiOS6以上やAndroidは十分対応できます。

<meta name=viewport content="width=device-width, initial-scale=1.0">

トラックバック用のURL

プロフィール

名前：イワサキ　ユウタ職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア誕生：1986年生まれ出身：静岡県特技：ウッドベース略歴 20