2
iframeを読み込むコンテナページがあります（これは99％の幅と高さに設定されています）。 iframeの内容は、メディアクエリを使用して応答します。コンテナのページもメディアクエリを使用して反応しますが、ここで特に重要とは思われません。iPhone 5のメディアクエリがIframeの内部で動作しない
これは最新のブラウザとiPhone 6ではうまく動作しますが、iPhone 5では動作しません。5はメディアクエリを完全に無視しています。
ChromeのiPhone 5エミュレータを使用してこれをテストすると、すぐに問題が表示されます。下のサンプルコードを使用すると、段落の色は＃f00になりますが、代わりに#cccになります。私も実際のiPhone 5で検証し、Chromeのエミュレーションと一致しました。
iframeコンテンツを別のページに読み込むと、メディアクエリがiPhone 5でうまく動作することに注意してください。この問題は、iframe内に読み込まれたときにのみ発生します。
誰もこの仕事をする方法を見つけましたか？私はjavascriptのハックのいくつかの種類が必要になりますか？
コンテナソースコード（container.htm）：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe src="iframeContent.htm" style="border: none; height: 99%; width: 99%; margin: 0px; padding: 0px;"></iframe>
</body>
</html>
インラインフレームソースコード（iframeContent.htm）：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p { border: 1px solid #ccc; }
@media screen and (min-width: 310px) {
p { border: 1px solid #f00; }
}
@media screen and (min-width: 350px) {
p { border: 1px solid #00f; }
}
</style>
</head>
<body>
<p>here is a paragraph of content.</p>
</body>
</html>