问题是，当您不得不使用IFrame将内容插入网站时，那么在现代网络世界中，人们期望IFrame也会响应。从理论上讲，它很简单，只需辅助使用<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＃ScrolledAreaoverflow: scroll）且iframe宽度为100％，iframe仍将采用div＃ScrolledArea的完整宽度，就好像溢出根本不存在一样。演示版
在这种情况下，iframe内容是否具有滚动区域，问题就变成了iframe，当iframe内容具有水平滚动区域时，如何获得响应？这里的问题不是因为Content.html没有响应，而是因为iOS Safari只是调整了iframe的大小，从而使iframe div#ScrolledArea完全可见。
@DA我向问题和解决方案都添加了演示。不，
—
伊德拉2014年
white-space: nowrap本身不是问题。我只是用它来获得一个极宽的宽度div#ScrolledArea。当IFrame内容中具有水平滚动区域时，就会出现问题。如果是这种情况，iOS Safari只会忽略您的宽度设置，并显示孔内容并破坏网站的响应能力。
嗯...我想知道这是否是一项“功能”。具有包含可滚动内容的可滚动区域（iFrame）会很尴尬。在触摸屏上进行交互非常困难。
—
DA。
@DA当然这是一个侄女案，您所说的可能是正确的（取决于实现方式，对我们有用），并且大多数站点没有水平滚动区域，但是当您这样做时……您甚至无法想象我花了多少时间 但这可能是一个问题，即使您隐藏的图像通过按钮或类似的东西隐藏并滚动了。
—
Idra 2014年
似乎有与此相关的问题：stackoverflow.com/questions/5267996/…它似乎确实是移动Safari的“功能” ...它正在尝试确保按用户的方式调整内容的大小仍然与之互动。我不确定如果您在滚动iframe中拥有滚动内容，该怎么办... Safari如何解释嵌套滚动元素中的滑动？
—
DA。
white-space: nowrap样式内容，iOS会将iFrame扩展到页面的整个宽度？