レスポンシブ には欠かせないviewport
2016年10月21日 html色々なパターンはあると思いますが、とりあえずは下記を使ってます。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
場合によっては、色々と指定しないといけない場面に遭遇するかもですね。。
viewportの指定
device-width
初期値は980px。viewportの横幅の指定です。
指定出来る値は200px〜10000px,device-width。
device-height
初期値は「横幅とのアスペスト比から計算される値」。
指定できる値は200px〜10000px,device-height。
initial-scale
初期のズーム倍率
device-width を指定した場合は、初期のズーム倍率が 1 になる。(initial-scale で変更することも可能)
ていうか、initial-scale=1とした時点で,width=device-widthであると暗黙的に決定される.その逆も同様
minimum-scale
最小倍率
minimum-scaleとinitial-scaleを組み合わせると縮小ができなくなります。
最小縮小比率の設定。
デフォルトは 0.25 で指定可能範囲は0より大きく、10までの値。
maximum-scale
最大倍率
最小拡大比率の設定。
デフォルトは 1.6 で指定可能範囲は0より大きく、10までの値。
user-scalable
ズームの操作
ユーザーがズームできるかどうかの設定。
初期値はyes。数字指定も可能。yes=1,no=0。
target-densitydpi=device-dpi
Androidに向けて、Webサイトがどの画面密度に合わせて設計されているかを指定する属性