viewportとは？
表示領域（今このページを見ている範囲）のことです。
注意点
画面サイズ(例えば、iPhone5で言えば320✖️568)とviewportは関係ないです。
実装方法
HTMLのheadのmetaタグで以下のように指定します。
|
1 2 3 |
<head> <meta name=”viewport” content=”width=device-width,initial-scale=1″> </head> |
content
googleは「width」と「initial-scale」の二つは記述した方が良いと述べています。
width
初期値
「980」になっています。（例外はあります。）
height
表示領域の高さを設定できます。
初期値
widthと端末サイズとアスペクト比によって自動算出になっています。
device-width
「実際の画面サイズの横幅」と「viewportの横幅」を一致させる設定です。サイトをレスポンシブ対応をさせるのであればこの設定は必須になります。なぜならCSS3のメディアクエリーは画面サイズではなくviewportのサイズを元に処理分岐されるためです。（なので、何も設定されていないとどの端末で閲覧した場合も980pxとして判定されてしまいます。）
initial-scale
表示倍率のことです。
1.0
「見たまんま」になります。基本的にはいじらずに1.0で設定するのが良いとされています。Googleもこれを推奨しています。
2.0
最初の表示倍率が2倍になります。（2倍に拡大されます。）
固定値(例えば320など）
これはGoogle非推奨の指定方法になります。どうしても固定の幅じゃないと厳しいというデザイン以外は選択しないようにしましょう。
maximum-scale（最大倍率）
最大倍率です。なので、1,0などを設定すると通常の倍率から拡大することが一切できなくなります。デフォルトは5.0です。
minimum-scale（最小倍率）
最小倍率です。デフォルトは0.25になっています。
user-scalable
ユーザーによる拡大縮小を許可するかの設定です。デフォルト値がyesになっています。これはyesのままであるサイトが望ましいです。目に不自由がある方とかに対応するためです。
JavaScriptでviewport操作
viewportの横幅
|
1 |
document.documentElement.clientWidth |
この記事へのコメントはありません。