问题在于，当您必须使用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>
然后这在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内容上有滚动区域，问题就变成了iframe，当iframe内容具有水平滚动区域时，如何获得响应？这里的问题不在于Content.html没有响应，而是因为iOS Safari只是调整iframe的大小，以便div#ScrolledArea完全可见。
扬帆大鱼