最佳答案
如何让 IFrame 在 iOS Safari 中响应？
问题是，当你必须使用 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>
对于 网址: http://www.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 中没有问题。你可以在横向和纵向之间切换没有任何问题。
然而，只需要通过添加以下内容来改变 网址: http://www.Content.html CSS:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
你听好了:
正如你所看到的，即使 网址: http://www.Content.html内容是完全响应的(Div # ScrolledArea有 overflow: scroll设置) ，iframe 宽度是100% ，iframe 仍然采用 Div # ScrolledArea的全宽度，就好像溢出不存在一样。演示
在这种情况下，如果 iframe内容上有滚动区域，问题就变成了，当 iframe 内容有水平滚动区域时，如何让 iframe响应？这里的问题不在于 网址: http://www.Content.html没有响应，而在于 iOS Safari 只是调整了 iframe 的大小，这样 div#ScrolledArea就完全可见了。
