iframe比iPhone上应该更宽

Question

我有一个iframe，我将其嵌入到响应式WordPress主题中。它在一些移动设备上看起来不错，但在iPhone上，iframe比它应该宽一点，它从容器中移出，因此用户无法看到iframe的正确部分（可能大约是20-30px） ）。这在纵向模式下发生 - 如果方向设置为横向，则看起来没问题。

iframe的内容也是响应式的，我使用bootstrap。此外，它在调整大小的桌面浏览器和Android移动设备上看起来还不错。所以问题只在于iPhone的纵向定位。

我在iframe的头部使用了这个：

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

有什么想法吗？

谢谢！

Answer 1

Mobile Safari似乎无法识别iframe上的宽度属性，但会识别最小宽度。

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维度设置，宽度，填充或边距，以及包含iframe的WordPress div上的边距或填充。

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

祝你好运！

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

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