iframe 比它在 iPhone 上的宽度要宽

Question

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

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

我在 iframe 的头部使用它：

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

有什么想法吗？

谢谢！

Answer 1

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

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

Answer 2

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

Answer 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;
}