问题是，当您必须使用IFrames将内容插入到网站中时，那么在现代Web世界中，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>
那么这在iOS7.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内容上有滚动区域，那么问题就变成了，当iframe内容有水平滚动区域时，如何使iframe响应？这里的问题不是content.html没有响应，而是iOS Safari只是调整iframe的大小，以便div#scrolledarea完全可见。
这个问题的解决方法其实很简单，有两种方法。如果您对content.html有控制权，那么只需将div#scrolledareawidth CSS更改为：
width: 1px;
min-width: 100%;
*width: 100%;
基本上，这里的思想很简单，您将width设置为小于视口（本例中为iframe width）的值，然后用min-width:100%覆盖它，以允许iOS Safari默认覆盖的实际width:100%。*width：100%；是这样的，所以代码将保持与IE6兼容，但如果您不关心IE6，您可以省略它。演示
正如您现在看到的，div#scrolledarea的宽度实际上是100%，而overflow：scroll；可以做到这一点，并隐藏溢出的内容。如果您可以访问iframe内容，那么这是最好的。
但是，如果您没有访问iframe内容的权限（无论出于什么原因），那么实际上您可以在iframe本身上使用相同的技术。只需在iframe上使用相同的CSS：
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
但是，这样做有一个限制，您需要关闭iframe上scrolling=“no”的滚动条，这样才能工作：
<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>
如果允许滚动条，那么这将不再在iframe上工作。也就是说，如果您修改content.html，那么您可以在iframe中保留滚动。演示
