いまいち理解しにくいViewPortについてメモしておきます。
違ってたらツッコミをお願いします。
概略
- ViewPortは仮想的なディスプレイ
- ブラウザはViewPortに描画し、その描画されたものがスマホの画面のサイズにあわせて表示される
- サイトのレイアウトがViewPortの横幅以上あれば、スマホの画面は横スクロールが表示されるか、自動で縮小される
- device-widthはスマホの解像度というわけではない。例えばXperia Acro HDの解像度は720pxだが、device-widthの値は360pxとなる。
- viewportが指定されたなかった場合、自動的にviewportの横幅は「980px」となる
以下、ケースごとの対応
リキッドレイアウトのスマホサイトのとき
リキッドレイアウトの場合、ViewPortには定番のこれですね。
[html]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[/html]
固定幅のスマホサイトのとき
幅が固定されてるならwidthにその幅を入れてしまいます。
[html]
<meta name="viewport" content="width=640px">
[/html]
PC向けサイトをスマホに表示させるとき
これも単純にwidthに横幅を入れてしまいます。
リキッドレイアウトの場合は、最低限見栄えのいい幅を指定します。
[html]
<meta name="viewport" content="width=1080px">
[/html]
もし表示がどうしても崩れるという場合は、お問い合わせからご連絡ください。
