maximum-scale(最小拡大比率) viewportの最大scale値
“ iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォンでの可視領域やズームなどの設定をするmeta要素がviewportです。 幅はデバイスに準拠、ズームはさせないという設定であれば下記のように記述する。 Androidブラウザではviewportのwidthに数値が指定できない。
スマートフォン独自の仕様 viewportについて
200pxから10000pxまでの範囲を指定できる。 height（高さ） 高さ。デフォルト値はwidthの値とデバイスのアスペクト比から算出される。
233pxから10000pxまでの範囲を指定できる。 initial-scale（ズームの詳細設定） ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scaleからmaximum-scaleによって定義された範囲の値が指定できる。
最初にページが表示されるviewportの値のみが指定可能。
user-scalableにnoを指定していなければズーム操作が可能になる。
ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限される。 minimum-scale（最小縮小比率） viewportの最小scale値。
デフォルト値は0.25。
0から10.0までの範囲を指定できる。 maximum-scale（最小拡大比率） viewportの最大scale値。
デフォルト値は1.6。
0から10.0までの範囲を指定できる。 user-scalable（ズームの有無設定） ユーザーがズーム操作できるかどうかをyesとnoで指定する。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限される。 viewport指定の一例 <meta name="viewport" content="[プロパティ]=[値], [プロパティ]=[値], [プロパティ]=[値]">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
Androidブラウザでviewportのwidth指定する際の注意点
代わりにJSで実装する方法などがある。
— | スマートフォン向けサイトの作り方｜ユージック |
