如何在 iPhone 6 中使 iFrame 响应?

Posted

技术标签:

【中文标题】如何在 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 像素)

以上是关于如何在 iPhone 6 中使 iFrame 响应?的主要内容,如果未能解决你的问题,请参考以下文章

iOS - 如何在应用程序中使 iPhone 静音/响铃

如何在 iPhone SDK 中使 tableviewcell 文本在触摸时可编辑?

iFrame 比 iPhone 6 上的整个屏幕更宽

如何在 div 中使图像响应

iframe 比它在 iPhone 上的宽度要宽

试图在 Swift 中使 UISearchController 的功能类似于 iPhone 中的语言设置