极客观点
项目管理
HarmonyOS
问题是，当您必须使用 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#ScrolledArea 有 overflow: scroll 设置）并且 iframe 宽度为 100%，iframe 仍然占据 div#ScrolledArea 的整个宽度，就好像溢出甚至不存在。 演示
在这种情况下， iframe 内容是否有滚动区域，问题就变成了，当 iframe 内容有水平滚动区域时，如何获得 iframe 响应？这里的问题不在于 Content.html 没有响应，而在于 iOS Safari 只是调整 iframe 的大小，以便 div#ScrolledArea 完全可见。
原文由 Idra 发布，翻译遵循 CC BY-SA 4.0 许可协议
这个问题的解决方案其实很简单，有两种方法可以解决。如果您可以控制 Content.html ，则只需将
div#ScrolledArea宽度 CSS 更改为：基本上这里的想法很简单，您将
width设置为小于视口（在这种情况下为 iframe 宽度）的东西，然后用min-width: 100%覆盖它以允许实际width: 100%iOS Safari 默认覆盖。*width: 100%;在那里，因此代码将保持 IE6 兼容，但如果您不关心 IE6，则可以省略它。 演示正如您现在看到的，
div#ScrolledArea宽度实际上是 100%，而overflow: scroll;可以做到这一点并隐藏溢出的内容。如果您有权访问 iframe 内容，那么这是更可取的。但是，如果您无权访问 iframe 内容（无论出于何种原因），那么您实际上可以在 iframe 本身上使用相同的技术。只需在 iframe 上使用相同的 CSS：
但是，这有一个限制，您需要在 iframe 上使用
scrolling="no"关闭滚动条才能工作：如果允许滚动条，那么这将不再适用于 iframe。也就是说，如果您改为修改 Content.html ，则可以在 iframe 中保留滚动。 演示