■概要
htmlでスマホレイアウトをするときはviewportを指定するが、微妙に思い通りの動きをしてくれないので、動きをまとめてみた。
viewportはスマホ画面に、どんな大きさのhtmlレイアウト領域(＝ビューポート)を、どんな倍率で表示するかを指定するための設定。
例: <meta name="viewport" content="width=device-width,initial-scale=1">
■device-widthについて
スマホの横幅を、論理ピクセル数で示した値。
スマホは解像度が高いので、論理ピクセル数＝物理ピクセル数(デバイスピクセル)ではない。
例えばwidth:100pxの要素は100論理ピクセルの幅を持つが、スマホ液晶上では100以上の物理ピクセルによって表示される。
device-widthは、この論理ピクセル数で画面幅を示す。
■viewportの指定方法（width、initial-scaleの指定）
viewportの指定がどのように機能するのかを理解するには、以下のそれぞれを別に考えると分かりやすい。
・widthのみを指定する場合
・initial-scaleのみを指定する場合
・widthとinitial-scale両方を指定する場合
width(レイアウト領域幅)のみを指定する場合
指定されたwidth幅を持つレイアウト領域に対してページレイアウトが作成される。
そのレイアウト領域が、スマホ幅内に表示しきれるようにinitial-scale(初期のズーム倍率)が自動設定される。
(つまり必ず1画面で表示できる倍率でページが表示される)
device-width=400の場合
widthは400 → 自動設定されるinitial-scale=1.0
widthは800 → 自動設定されるinitial-scale=0.5
widthは1600 → 自動設定されるinitial-scale=0.25
initial-scale(初期のズーム倍率)のみを指定する場合
initial-scale倍に拡大縮小したときdevice-widthでぴったり収まる幅に対してページレイアウトが作成される。
width(レイアウト領域幅)は上記の幅に自動設定される。
(つまり必ず1画面で表示できるレイアウト領域幅でページが表示される)
device-width=400の場合
initial-scale=1.0 → 自動設定されるwidth=400
initial-scale=0.5 → 自動設定されるwidth=800
initial-scale=0.25 → 自動設定されるwidth=1600
ちなみにズーム倍率とは「(拡大縮小して)画面表示されている論理ピクセル幅」に対する「画面幅の論理ピクセル数(device-width)」の割合のことである。
例えば表示論理ピクセル=200、device-width=400なら2.0倍のズーム倍率で表示していることになる。
width と initial-scaleを指定する場合
指定されたwidth幅を持つレイアウト領域に対してページレイアウトが作成される。
そのレイアウト領域が、指定されたinitial-scaleのズーム倍率でスマホ画面に表示される。
(必ずしも1画面でレイアウト領域幅が表示しきれるとは限らない)
device-width=400の場合
width=400, initial-scale=1.0 → レイアウト領域幅400が、1.0倍で表示されるので画面にぴったり収まる。
width=800, initial-scale=1.0 → レイアウト領域幅800が、1.0倍で表示されるのでレイアウト領域は半分ほど画面溢れする。
width=400, initial-scale=0.5 → レイアウト領域幅400が、0.5倍で表示されるのでレイアウト領域に画面の半分に縮小された内容が表示される。
width=800, initial-scale=0.5 → レイアウト領域幅800が、0.5倍で表示されるので画面にぴったり収まる。
■その他のプロパティと既定値
minimum-scale=0.25 ズーム倍率 最小
maximum-scale=1.60 ズーム倍率 最大
user-scalable=yes ズーム率の変更許可 yes|no
■その他情報
viewport未指定の場合
<meta name="viewport" content="width=980">
と同じ意味になる。
一般的に使われる設定
<meta name="viewport" content="width=device-width,initial-scale=1">
これは、スマホの画面幅を示す論理ピクセル数のレイアウト領域に対して、ページレイアウトを行う設定。
メディアクエリとの関係
@media (max-width: 520px) {...}などの条件は、device-widthには関係なくwidth(＝レイアウト領域幅)に対する条件になる。
そのため<meta name="viewport" content="width=980">などの指定をすると、スマホのデバイス幅がいくら狭くても、メディアクエリでは980ピクセルの幅があると判定される。
（だから一般的には<meta name="viewport" content="width=device-width,initial-scale=1">が推奨される）