iframe 比它在 iPhone 上的宽度要宽

Posted 2023-03-06

【中文标题】iframe 比它在 iPhone 上的宽度要宽

【英文标题】：An iframe is wider than it should on iPhone

【发布时间】：2014-07-12 11:34:04

【问题描述】：

我有一个嵌入到响应式 WordPress 主题中的 iframe。它在某些移动设备上看起来不错，但在 iPhone 上，iframe 比应有的宽一些，并且它会脱离容器，因此用户无法看到 iframe 的正确部分（可能约为 20-30 像素）。这发生在纵向模式 - 如果方向设置为横向，它看起来没问题。

iframe 的内容也是响应式的，我使用的是引导程序。在调整大小的桌面浏览器和 android 移动设备上看起来也不错。所以问题只在于 iPhone 的纵向方向。

我在 iframe 的头部使用它：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

有什么想法吗？

谢谢！

【问题讨论】：

在调整大小以匹配 iPhone 的纵向宽度的浏览器上是否会执行相同的操作？也许某些元素/样式的最小尺寸大于 iPhone 的宽度？

不，它在任何其他浏览器上看起来都不错，无论是调整大小的桌面浏览器（Chrome、Firefox、Safari）还是 Android 浏览器。

【参考方案1】：

Mobile Safari 似乎无法识别 iframe 上的宽度属性，但可以识别 min-width。

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

【讨论】：

需要进一步研究，但这对我有用。以为我要疯了 - 所以谢谢！

我还必须添加 scrolling="no" 才能使其正常工作。但是，它必须是有条件的，因为通过此更改，它会导致其他设备上的 iframe 无法正常工作。

iframe 宽度：1px;最小宽度：100%；并且 iframe 属性中的 scrolling="no" 对我有用（ios 11，cordova - webview）

【参考方案2】：

问题是移动版 Safari 忽略了 iframe width 属性。我在这里创建了一个新问题并用解决方案自己回答：How to set the width of an iframe in iOS6?

【参考方案3】：

对于元标记，请尝试以：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果这不能解决问题，请查找导致框架太宽的原因，例如iframe 尺寸设置、iframe 内元素的宽度、填充或边距，以及包含 iframe 的 WordPress div 上的边距或填充。

请记住，iframe 内容是一个完全独立的文档，因此您需要仔细检查父 WordPress 页面和 iframe 页面中的详细信息。

祝你好运！

编辑 您还可以通过在 WordPress CSS 中使用重置来检查它不是默认浏览器设置，例如

iframe
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;

【讨论】：

感谢您的回答。我确实尝试过那条元线，但没有运气。此外，我认为 iframe 内部没有任何问题，因为任何其他浏览器都能正确显示它。

你有 URL 来证明这个问题吗@watt？

包含 iframe 的元素的边距或内边距如何？例如，父 WordPress 页面可能有 10 - 20 像素的左右边距或内边距。

很遗憾我还没有网址。也没有边距/填充设置。尝试使用空白 html 模板，我得到了同样的问题，所以它与主题无关。

我认为它与 iframe 的宽度属性有关。 iframe 似乎在 Iphone 上没有考虑到它...