IOS iframe宽高问题（来至stackoverflow）

Question

重点就是这三行代码，其他还有一些自己看！

问题是，当你不得不使用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使其完全可见。

你能和我们分享一个链接吗？你是说，如果页面内的页面内容具有white-space: nowrap样式，iOS会将iFrame扩展到页面的整个宽度？ - DA。 14年4月16日在2:03 — DA。, 14年4月16日在2:03
@DA我将演示添加到问题和解决方案。不，这white-space: nowrap本身不是问题。我只是用它来获得一个极端的宽度div#ScrolledArea。问题出现在IFrame内容中有水平滚动的区域时。如果是这种情况，iOS Safari会忽略您的宽度设置，并显示洞内容并打破网站的响应。 - Idra 14年 4月16日在10:50 — Idra, 14年
嗯...我想知道这是不是一个“功能”。具有包含可滚动内容的可滚动区域（iFrame）将是尴尬的。在触摸屏上进行交互会非常困难。 - DA。 14年4月16日在15:02 — DA。, 14年4月16日在15:02
@DA当然这是一个侄女的情况下，你说的话可以是真实的（取决于实施，为我们工作），大多数网站没有水平滚动区域，但是当你做...你甚至不能想象我在这花了多少时间。但是，即使你有隐藏的图像和按钮或类似的东西滚动，这可能是一个问题。 - - Idra 14年 4月16日在18:35 — Idra, 14年
它看起来像这里有相关的问题：stackoverflow.com/questions/5267996/...它似乎是移动Safari的“功能”...它试图确保内容的大小方式，用户可以仍然与它互动。我不确定如果您在滚动iframe中滚动内容会发生什么...... Safari如何解释嵌套滚动元素中的滑动？ - DA。 14年4月16日在19:01 — DA。, 14年4月16日在19:01

杰克逊 · Accepted Answer · 2016-02-16 22：49：14Z

这个问题的解决方案其实很简单，有两种方法可以解决这个问题。如果你有对Content.html的控制权，那么只需将div#ScrolledArea宽度CSS改为：

        width: 1px; min-width: 100%; *width: 100%;

基本上这里的想法很简单，你设置的width东西比视口小（在这种情况下，iframe的宽度），然后覆盖它，min-width: 100%以允许实际上width: 100%默认覆盖iOS Safari。在*width: 100%;那里，所以代码将保持IE6兼容，但如果你不关心IE6，你可以省略它。演示

在这里输入图像说明

正如你现在所看到的，div#ScrolledArea宽度实际上是100％，overflow: scroll;可以做到这一点，并隐藏溢出的内容。如果您有权访问iframe内容，那么这是更可取的。

但是，如果您无法访问iframe内容（出于某种原因），那么您实际上可以在iframe本身上使用相同的技术。简单地在iframe上使用相同的CSS：

    iframe {
        width: 1px; min-width: 100%; *width: 100%; }

但是，这有一个限制，你需要关闭scrolling="no"iframe上的滚动条才能工作：

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

如果滚动条被允许，那么这将无法在iframe上工作。也就是说，如果您修改Content.html，那么您可以保留iframe中的滚动。演示

一个伟大的解决方案，我们花了3个工程师一天试图找出解决方案，我们的情况更糟糕。在我们的情况下，我们控制的内容，但不是嵌入代码，所以你的解决方案就像一个魅力 - terrinecold 14年 11月14日在22:41 — terrinecold, 14年
你救了我的一天！这比我使用的jquery-force-width解决方案要干净得多。 - 拉波 14年 12月3日在10:32 — 拉波, 14年
我不得不使宽度：10px！这对工作很重要。 - 尼克戈特利布 14年10月10日在18:09 — 尼克戈特利布, 14年10月10日在18:09
就像@NickGottlieb提到的，我不得不添加!important到该width属性，以获得iframe响应web设计准备在iPhone 4与iOS 7 - malisokan 15年 1月8日在16:05 — malisokan, 15年
@ЮнгвиртТони变通办法不需要工作，有可能width早先设置!important或更高优先级的CSS覆盖它。在iPhone 4 iOS7孤立的情况下，这是不需要的。 - Idra 15年 1月8日在16:21 — Idra, 15年

DA。 · Answer 2 · 2014-04-17 03：02：42Z

问题似乎是，如果移动Safari包含的文档比您指定的宽，则它将拒绝服从您的iFrame的宽度。例：

http://jsbin.com/hapituto/1

在桌面浏览器上，您将看到一个设置为300px的iFrame和Div。内容更宽，因此您可以滚动iFrame。

但是，在移动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浏览器中，您现在可以通过包含它的div滚动现在完全展开的iFrame的内容。

问题：在桌面浏览器上看起来真的很丑，就像现在有双滚动条一样。所以你可能不得不用JS来做一些浏览器检测来解决这个问题。

我仍然认为这不是问题的范围，因为你在这里展示的解决方案是如何在IOS Safari中虚假洞iframe滚动的标准方式，但考虑到这个iOS问题是关于IFrame滚动的问题（内容或其他），那么它很高兴在这里。 - Idra 14年 4月17日在12:41 — Idra, 14年
我想我不完全明白你的问题。据我所知，你遇到的问题是，在iOS中，移动Safari试图阻止一个iFrame在第一个地方滚动，并强制它的宽度。我误解你的问题吗？ - DA。 14年4月17日在13:49 — DA。, 14年4月17日在13:49
本质上是这个问题，它只是所需的解决方案是不同的。在最初的问题，IFrame的内容是响应，而水平滚动的内容，所以问题不是如何模仿iframe滚动，但如何获得iframe的宽度是100％即响应，而你有水平滚动内容那iframe。这就是为什么上述方法在这种情况下不起作用，因为设计的响应性已经被打破，您需要滚动以查看完整的内容，即使在设计中您通常不需要的地方。 - Idra 14年 4月17日在14:00 — Idra, 14年
我很抱歉，我意识到我误导了你的意见之一。iframe不滚动。这是关键，iframe不应该只滚动它的内容的一部分，即div#ScrolledArea在我的例子中（绿色）。我之前只是误读但iframe不应该滚动只能根据容器元素自己调整大小即有width: 100%; - Idra 14年 4月17日17:18 — Idra, 14年

社区 · Answer 3 · 2017-05-23 12：03：02Z

我需要一个跨浏览器解决方案。要求是：

需要iOS和其他地方
无法访问iFrame中的内容
需要它滚动！

建立关我从了解到@Idra关于iOS上的滚动=“否”，这篇文章关于配件的iFrame内容在iOS上的屏幕这里是我结束了。希望它可以帮助别人=）

HTML

<div id="url-wrapper"></div>

CSS

html, body{ height: 100%; } #url-wrapper{ margin-top: 51px; height: 100%; } #url-wrapper iframe{ height: 100%; width: 100%; } #url-wrapper.ios{ overflow-y: auto; -webkit-overflow-scrolling:touch !important; height: 100%; } #url-wrapper.ios iframe{ height: 100%; min-width: 100%; width: 100px; *width: 100%; }

JS

function create_iframe(url){ var wrapper = jQuery('#url-wrapper'); if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){ wrapper.addClass('ios'); var scrolling = 'no'; }else{ var scrolling = 'yes'; } jQuery('<iframe>', { src: url, id: 'url', frameborder: 0, scrolling: scrolling }).appendTo(wrapper); }

同样的要求，像一个魅力工作。 - mcmhav 15年 5月18日在17:07 — mcmhav, 15年
upvoted，但...为什么IE6规则在“ios”类？:-) - J. Bruni 1月6日10:39 — J. Bruni, 1月6日10:39

码头 · Answer 4 · 2016-07-22 19：27：28Z

所有这些解决方案的问题是，iframe永远的高度永远不会改变。

这意味着你将无法在iframe使用Javascript 内部中心元素position:fixed;，或者position:absolute;因为iframe本身从不滚动。

我在这里详细的解决方案是div使用这个CSS 包装iframe的所有内容：

#wrap {
    position: fixed; top: 0; right:0; bottom:0; left: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

这样，Safari认为内容没有高度，可以让你分配iframe正确的高度。这也可以让你以任何你想要的方式定位元素。

你可以在这里看到一个快速和肮脏的演示。

这是为我工作的唯一解决方案。当然，只有在你控制内容的iframe情况下才能使用，但在我的情况下，我是这么做的。干杯! - 文斯 16年 8月24日在19:18 — 文斯, 16年

4dgaurav · Answer 5 · 2014-04-16 01：56：39Z

投票 0投票

CSS只有解决方案

HTML

<div class="container"> <div class="h_iframe"> <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> </div> </div>

CSS

html,body { height:100%; } .h_iframe iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

DEMO

在iframe中的HTML页面的另一个演示

编辑14年4月16日在1:56

回答 14年4月15日在12:27

4dgaurav

912342145

也许我错误地实现了你的解决方案，但是当我用我的孤立的测试用例来测试时，那么它在iOS 7.1的iPhone 4中完全不起作用。你能详细说明这应该如何工作吗？ - Idra 14年 4月15日在12:43

确定它接缝像你误解了这个问题，检查这个链接出来这是你的新的演示iframe内容集成没有任何额外的CSS应用于iframe。如果你在iOS Safari中查看它，那么它仍然是响应式的，这是因为这个页面没有任何横向滚动，会强制iframe宽度比视口宽。正如问题中所述，在这样的网站上，您不需要为iframe做任何事情来响应。 - - Idra 14年 4月16日在12:03

所以你想要它的行为，举例给你的链接？ - 4dgaurav 14年 4月16日在12:08

添加评论

Aaron Dishno博士 · Answer 6 · 2015-08-18 21：13：27Z

内容窗格上的宽度有问题，为iframe创建一个水平滚动条。原来，一幅图像的宽度比预期的要宽。我能够通过将所有图像的css max-width设置为百分比来解决这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1" /> img { max-width: 100%; height:auto; }

S.Yadav · Answer 7 · 2016-11-16 12：25：15Z

我正在与ionic2和系统配置如下 -

******************************************************

Your system information: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.1.8 Ionic App Lib Version: 2.1.4 ios-deploy version: Not installed ios-sim version: 5.0.8 OS: OS X Yosemite Node Version: v6.2.2 Xcode version: Xcode 7.2 Build version 7C68 ******************************************************

对于我来说这个问题已经解决这个代码 -
对于HTML iframe标签 -

<div class="iframe_container"> <iframe class= "animated fadeInUp" id="iframe1" [src]='page' frameborder="0" > <!-- <img src="img/video-icon.png"> --> </iframe><br> </div>

看到相同的CSS -

.iframe_container {
  overflow: auto; position: relative; -webkit-overflow-scrolling: touch; height: 75%; } iframe { position:relative; top: 2%; left: 5%; border: 0 !important; width: 90%; }

在我的情况下，位置属性在这里扮演着重要的角色
位置：相对;

它也可以帮助你！

IOS iframe宽高问题（来至stackoverflow）

7答案

“相关推荐”对你有帮助么？