anti scroll

ブラウザと小説の新しい関係を模索する

viewportのdevice-widthはbodyタグから適用される

別の言い方をすれば「bodyより上位のタグには適用されない」ということみたいです。

例えば次のようなページ(parent.html)をiPhone5device-width = 320px)で開き、iframeを使ってchild.htmlを読み込ませます。

<!-- parent.html -->
<body style="margin:10px">
  <iframe width="100%" src="https://other-domain.com/child.html"></iframe>
</body>

そして、どちらのheadにもスマホ用のお約束で

<meta viewport content="max-width=device-width">

が設定されているものとします。

このときchild.htmlで、bodyhtmlの横幅をそれぞれ確認してみます。

$("html").width(); // 300px
$("body").width(); // 320px(device-width)

上位であるhtmlタグの横幅よりも、内側のbodyタグの横幅のほうが大きい、という結果になりました。

つまりbodyタグにはdevice-widthが設定されていますが、htmlタグには親ドキュメント(parent.html)のコンテキストを考慮したサイズ(width:100%)が生きている、ということみたいです。

クロスドメインだと子フレームから親ドキュメントの情報を取得する処理は(セキュリティー上の理由で)ブロックされますが、この情報を使えば少なくとも親ドキュメントの横幅は取得できる、ということになります。