Viewportとは、表示領域のサイズを指定するプロパティのこと。
Viewportはmeta要素を使って下記のように定義する。
<meta name="viewport" content="値" />
content属性には、width, height, initial scale, user-scalable, minimum-scale, maximau-scaleを指定できる。(横幅、縦幅、ページ読み込み時の拡大率、ユーザーに寄る拡大操作の許可、拡大率の最小、拡大率の最大)
Mobile Safariのデフォルトは↓と同じ状態。
<meta name="viewport" content="width=980px, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=1.6" />
横幅をdevice-widthと指定すると、表示領域の横幅はデバイスのサイズに応じて自動的に調整される。
<meta name="viewport" content="width=device-width">
参考書籍:
HTML5+CSS3で作る 魅せるiPhoneサイト
Viewportはmeta要素を使って下記のように定義する。
<meta name="viewport" content="値" />
content属性には、width, height, initial scale, user-scalable, minimum-scale, maximau-scaleを指定できる。(横幅、縦幅、ページ読み込み時の拡大率、ユーザーに寄る拡大操作の許可、拡大率の最小、拡大率の最大)
Mobile Safariのデフォルトは↓と同じ状態。
<meta name="viewport" content="width=980px, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=1.6" />
横幅をdevice-widthと指定すると、表示領域の横幅はデバイスのサイズに応じて自動的に調整される。
<meta name="viewport" content="width=device-width">
参考書籍:
HTML5+CSS3で作る 魅せるiPhoneサイト