meta タグ viewport はスマホ用のページを作成する上で欠かせない。
けれども僕は、この meta タグ viewport を設定することで、何がどうなるのか？
についてまったく理解していなかった。
そこで、小一時間程調べてみた。
そのメモをここに残す。
間違っていたらご指摘お願いします。
Viewport とは
viewport とは何か？おそらく文脈によってviewportは様々な意味として解釈される。
まずは、viewportという用語を定義する。
http://eow.alc.co.jp/search?q=viewport&ref=sa
viewport とは表示領域のことである。領域なので、サイズ（広さ）を持つ。
Web 開発の文脈において、viewportという用語は様々な意味として解釈される。
あるときはデバイスの画面。あるときはブラウザ。あるときは可視領域。
まずは、これらの曖昧さを除去するために、より具体的なviewportを定義する。
以下のページがとても参考になるので拝借させていただく。
http://www.quirksmode.org/mobile/viewports2.html
viewport には 2 種類ある。
- visual viewport
- layout viewport
また、これとは別に、デバイスの画面がある。ここでは、viewportとは呼ばずにscreenと呼ぶ。
- screen size
上記の 3 つは明確に異なる。
また、もう一つの概念を定義する。
- zoom level
これは何だ？という質問は後で解決する。とりあえず定義する。
layout viewport
layout viewportとは HTML 要素のサイズである。
ブラウザのサイズを変えたとしても、layout viewport のサイズは変わらない。
visual viewport
visual viewportとはブラウザの可視化領域に表示されている HTML 要素のサイズである。
ブラウザのサイズを変えると、表示される部分が変わるため、visual viewport のサイズも変わる。
screen
screen とはデバイスの画面である。PC なら、そのディスプレイ。iPhone 6 Plus であれば、その幅は 414、高さは 736 である。
ブラウザのサイズを変えたとしても、screen size のサイズは変わらない。
zoom level
visual viewportの幅をscreenの幅で割ったもの。
iPhone 6 Plus における layout viewport, visual viewport, screen のサイズ
以下の HTML を参考にする
https://gist.github.com/anonymous/db97a4364f8068b47e60
screen のサイズは 414x736
body 要素の layout viewport のサイズは 1000x1000
このとき、iOS Safari で表示した場合、visual viewport のサイズはどうなるだろう？
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html において紹介されているように、iOS Safari はそのデフォルトにおいて、visual viewport のサイズを幅 980 としてしまう。だが、実際の screen の幅 414 であるため、ページの文字がとても小さくなってしまう。
要するに、iOS Safari において、幅 980 までが可視化されるが、screen の幅が 414 であるため表示しきれない。このときブラウザの挙動として、表示する HTML 要素を縮小する。実際の大きさよりも 0.4 倍の大きさで表示される。（414 / 980 = 0.42244897959183675）
この 0.4 が zoom level である。
meta タグ viewport を設定するとどうなるか？
meta タグ viewport において、iOS Safari のデフォルトのvisual viewportの幅を変えることができるのである。
meta タグ viewport のリファレンス的なページはたくさんあるのでググったほうが良い。