読者です 読者をやめる 読者になる 読者になる

maximum-scale(最小拡大比率) viewportの最大scale値

iPhoneAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。


スマートフォン独自の仕様 viewportについて

スマートフォンでの可視領域やズームなどの設定をするmeta要素がviewportです。

viewportの各プロパティ width(幅) 可視領域の幅。デフォルト値は980px。
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指定する際の注意点

Androidブラウザではviewportのwidthに数値が指定できない。
代わりにJSで実装する方法などがある。

http://blog.webcreativepark.net/2011/01/11-023827.html











スマートフォン向けサイトの作り方|ユージック