備忘録的プログラミングリファレンス

<meta name="viewport">

 <meta name="viewport"> は、主にレスポンシブ web デザインに対応するためのページ情報の指定方法です。 特にスマートフォンに必要な設定です。

 <meta> エレメントは予めページ情報を設定しておくための HTML タグです。<head> エレメント内に入れます。
 name="viewport" は表示のための最適値を指定します。

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

 content 属性値はブラウザに予め指定する設定値です。
 width=device-widthは表示幅をデバイスの画面幅に合わせるという意味です。initial-scale=1.0は初期のズーム比で、 1.0 は最初はズーム無しで表示するという指定です。

 この <meta name="viewport"> は、<title> より前に設定したほうがよいようです。

 height に関してはデバイス画面のアスペクト比(縦横比)から自動で計算されます。

 レスポンシブ web デザインについてはレスポンシブ web デザインを参照してください。

- ad -

属性(Attributes)

 主な属性のみを示します。

AttributeValueExtra information
namemeta が viewport の設定値であることを示す
content表示のための設定値

 content の設定値は他に以下のものがあります。

user-scalable
ユーザーによるズームの可否。yes.. 可、no.. 不可
minimum-scale
最小ズーム値。1.0 でズームなし。0 ~ 10
maximum-scale
最大ズーム値。1.0 でズームなし。0 ~ 10

タグの編集

- ad -