问题在于，当您需要使用IFrames将内容插入网站时，在现代网络世界中，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#ScrolledArea设置了overflow: scroll) 并且 iframe 宽度为100%，iframe 仍然占据整个 div#ScrolledArea 的宽度，就好像溢出根本不存在一样。Demo
在这种情况下，当 iframe 内容具有水平滚动区域时，问题就变成如何使 iframe 响应式。这里的问题不在于 Content.html 不响应式，而是在于 iOS Safari 简单地调整 iframe 的大小，以便完全显示 div#ScrolledArea。
white-space: nowrap本身并不是问题所在。我只是用它来获得div#ScrolledArea的极端宽度。当 IFrame 内容中存在可水平滚动的区域时，问题就出现了。如果是这种情况，iOS Safari 就会忽略您的宽度设置，并显示整个内容，破坏站点的响应性。 - Idra