如何在 iPhone 6 中使 iFrame 响应？

Posted 2023-03-05

【中文标题】如何在 iPhone 6 中使 iFrame 响应？

【英文标题】：How to make iFrame responsive in iPhone 6?

【发布时间】：2016-04-04 01:17:06

【问题描述】：

我添加了一个 iframe，它在所有浏览器和某些设备中都可以正常工作，但在 iphone 6 中。iframe 没有响应。它不适合 100% 的 iphone 屏幕尺寸。

我在网上找到了很多解决方案，但其中大多数都展示了如何在 iphone 中制作 iFrame 滚动。我不需要那个。我想让它响应并根据屏幕大小进行调整。

<div class="frame-container" style="position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0;">
<iframe id="frame"   style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe >
</div>

我已经删除了上面示例中 iframe 中的 src=""

从屏幕截图可以看出，iframe 没有响应并出现水平滚动。在加载过程中，iframe 是根据设备视口而定的，但一旦完全加载，iframe 就会占据整个宽度并出现水平滚动。

检查浏览器堆栈

【问题讨论】：

为什么要绝对定位？

根据各种帖子，这是一个解决方案，但不幸的是对我不起作用。以前不是绝对位置。如果您有其他方法可以告诉我

尝试添加 box-sizing:border-box;属性到 iframe 和它的父元素

请为您的代码发布一个小提琴，以便我检查它。

【参考方案1】：

这个问题解决了，只需要应用这个样式。我对此做了一个内联css。

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

这里是link 以获得更详细的答案

【讨论】：

请注意，正如链接答案中指出的那样，*width: 100%; 仅用于 IE6 兼容性，天知道为什么今天有人会关心它。

对于以后遇到此问题的任何人-对我来说，这是通过设置 width:0px; （不是 1 像素）