問題は、IFrameを使用してコンテンツをWebサイトに挿入する必要がある場合、最新のWebの世界では、IFrameも応答することが期待されていることです。理論的にはそれは単純です。単純にaiderを使用する<iframe width="100%"></iframe>かCSSの幅を設定しますiframe { width: 100%; }が、実際にはそれほど単純ではありませんが、そうすることはできます。
iframeコンテンツが完全にレスポンシブで、内部スクロールバーなしでサイズを変更できる場合、iOS Safariはiframe実際の問題なしにのサイズを変更します。
次のコードを考えた場合：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>
<style type="text/css" rel="stylesheet">
#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>Content.html：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>
<style type="text/css" rel="stylesheet">
#Main {
width: 100%;
background: #ccc;
}
</style>
</head>
<body>
<div id="Main">
<div id="ScrolledArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique.
</div>
</div>
</body>
</html>その後、これはiOS 7.1 Safariでは問題なく機能します。問題なく横向きと縦向きを切り替えることができます。
ただし、これを追加してContent.html CSSを変更するだけです。
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}あなたはこれを手に入れます：
ご覧のとおり、Content.htmlコンテンツは完全に応答性があり（div＃ScrolledAreaがoverflow: scroll設定されています）、iframeの幅が100％であっても、オーバーフローが存在しないかのように、iframeはdiv＃ScrolledAreaの幅全体を使用します。デモ
このような場合、iframeコンテンツにスクロール領域がありましたが、問題は、iframeiframeコンテンツに水平スクロール領域があるときにレスポンシブを取得する方法ですか？ここでの問題は、Content.htmlが応答しないという事実ではなく、iOS Safariが単にiframeのサイズを変更して、div#ScrolledAreaが完全に表示されるようにするという事実です。
white-space: nowrapそれ自体は問題ではありません。私は単にそれを使って極端な幅にしていdiv#ScrolledAreaます。問題は、IFrameコンテンツに水平スクロール可能な領域がある場合に発生します。その場合、iOS Safariは単に幅の設定を無視して、穴のコンテンツを表示し、サイトの応答性を壊します。
white-space: nowrapスタイルのあるコンテンツがある場合、iOSはiFrameをページ内の全幅に拡張すると言っていますか？