ホーム >  WEB全般 >  viewportメタタグの設定


Posted:2014/12/12 9:00:15 AM|Category : WEB全般

viewportメタタグの設定

 viewport(ビューポート)とは、「表示領域」のことです。
前回メディアクエリの指定をして、スマートフォン画面にスタイルを対応させることについて説明しました。
メディアクエリで画面サイズごとCSSを切り替えるには?
しかし、viewportメタタグを指定しなければ、メディアクエリを記述しても幅が広いまま表示されてしまいます。

viewportメタタグとは?

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

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

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

viewportの定義

デスクトップのviewport

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

スマートフォンのviewport

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

viewportの2つの領域

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

表示領域

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

閲覧可能領域

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

viewportをコントロールするには?

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

viewportメタタグの仕様

プロパティ 詳細 使用できる値 デフォルト値
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

ベストなコーディングは何か?

iOS5以前のsafariバグ

 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年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告