如何在iOS Safari中让IFrame响应？
问题是，当你不得不使用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.1Safari中可以正常工作。您可以在横向和纵向之间切换，没有任何问题。
但是，只需通过添加以下内容来更改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内容有水平滚动区域时，如何让iframe响应？这里的问题不在于Content.html没有响应，而在于iOS Safari只是简单地调整了iframe的大小，以便div#ScrolledArea完全可见。
回答 8
Stack Overflow用户
发布于 2014-04-15 20:15:42
这个问题的解决方案实际上非常简单，有两种方法可以解决。如果您可以控制Content.html，则只需将div#ScrolledArea width CSS更改为：
width: 1px;
min-width: 100%;
*width: 100%;基本上，这里的想法很简单，您将width设置为小于视口的值(在本例中为iframe宽度)，然后使用min-width: 100%覆盖它，以允许iOS Safari默认覆盖的实际width: 100%。*width: 100%;在那里，因此代码将保持与IE6兼容，但是如果您不关心IE6，则可以省略它。Demo
正如你现在看到的，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中保留滚动。Demo
Stack Overflow用户
发布于 2014-04-17 11:02:43
问题似乎是，如果Mobile Safari包含的文档比您指定的宽度更宽，它将拒绝服从您的iFrame的宽度。示例：
在桌面浏览器上，您将看到iFrame和Div都设置为300px。内容更宽，因此您可以滚动iFrame。
然而，在mobile safari中，您会注意到iFrame会自动扩展到内容的宽度。
我的猜测是，这是一种解决长期存在的页面中滚动内容问题的方法。在过去，如果你在触摸设备上有一个大的滚动iframe，你会“卡住”iframe，因为它是滚动的，而不是页面本身。苹果似乎已经决定iFrame的默认行为是“不滚动”，并扩展以防止这种情况。
一种选择可能是此解决方法。不要假设iFrame会滚动，而是将iframe放在您确实可以控制的DIV中，让它滚动。
示例：http://jsbin.com/zakedaja/1
示例标记：
<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
<iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>在移动safari中，您现在可以通过包含iFrame的div滚动现在完全展开的div的内容。
问题:这在桌面浏览器上看起来真的很难看，因为现在你有了双滚动条。因此，您可能必须使用JS执行一些浏览器检测来绕过此问题。
Stack Overflow用户
发布于 2016-07-23 03:27:28
所有这些解决方案的问题是iframe的高度永远不会改变。
这意味着您不能使用Javascript、position:fixed;或position:absolute;在iframe中居中元素，因为iframe本身从不滚动。
我的解决方案detailed here是使用下面的CSS将iframe的所有内容包装在一个div中：
#wrap {
position: fixed;
top: 0;
right:0;
bottom:0;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}这样，Safari就会认为内容没有高度，并允许您正确地分配iframe的高度。这也允许你以任何你想要的方式定位元素。
https://stackoverflow.com/questions/23083462
复制相似问题