素のHTML5のページを作ってみる。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>disable viewport</title> </head> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; } p { font-size:12px; } </style> <body> <p>viewport metadata disabled!</p> </body> </html>
これで表示すると、Android 端末において、「viewport metadata disabled!」が非常に小さく映る。というか、画面全体サイズがさらに大きい前提でレンダリングされる。
そこに、以下の viewport 属性を指定する。
<meta name="viewport" content="width=device-width,user-scalable=yes, initial-scale=1.0, maximum-scale=3.0" />
user-scalable がキモ。レンダリング時にはブラウザ側が任意のサイズでレンダリングできるようになる。
何か色々便利そうなので、メモ。
他の属性として
| width | ビューポート（可視領域）の幅（ピクセル値）。デフォルト値は 980。(200 - 10000) |
| height | ビューポートの高さ(px)。デフォルト値は width の値とデバイスのアスペクト比で決定。(233-10000) |
| initial-scale | ページが可視領域内にフィットするように計算された値がデフォルト値となる。minimum-scale 〜 maximum-scale の範囲で設定可。user-scalable に no を指定していなければズーム操作が可能となる。ズームの範囲は minimum-scale と maximum-scale の範囲で設定可能。 |
| minimum-scale | ビューポートの最小 scale 値。デフォ 0.25。(0 - 10.0) |
| maximum-scale | ビューポートの最大 scale 値。デフォ 1.6。範囲は同上 |
| user-scalable | ユーザーがズーム操作できるかどうかを yes と no で指定する。 |
| device-width | デバイスの幅(px) |
| device-height | デバイスの高さ(px) |
とか色々設定できると。