ひょんなことからviewport
のdevice-width
がbody
タグから適用される事を知りました。
別の言い方をすれば「body
より上位のタグには適用されない」ということみたいです。
例えば次のようなページ(parent.html
)をiPhone5(device-width
= 320px)で開き、iframe
を使ってchild.html
を読み込ませます。
<!-- parent.html --> <html> <head> <meta viewport content="max-width=device-width"> </head> <body style="margin:10px"> <iframe width="100%" src="https://other-domain.com/child.html"></iframe> </body> </html> <!-- child.html --> <html> <head> <meta viewport content="max-width=device-width"> </head> <body> this is child! </body> </html>
このときchild.html
で、body
とhtml
の横幅をそれぞれ確認すると…
$("html").width(); // 300px $("body").width(); // 320px(device-width)
html
の横幅 < body
の横幅
という結果になりました。
つまりchild.htmlのbody
にはdevice-width
が設定されていますが、html
には親(parent.html
)のコンテキストを考慮したサイズ(width:100%
)が生きているのです。
クロスドメインだと子フレームから親ドキュメントの情報を取得する処理は(セキュリティー上の理由で)ブロックされますが、この情報を使えば少なくとも親ドキュメントの横幅は取得できる、ということになります。
もちろんchild.html
のmeta
にmax-width=device-width
が設定されている必要がありますが。