技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

viewport設定

素の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)

とか色々設定できると。