iframe比iPhone上应该更宽

wat*_*att 9 css iphone iframe ios responsive-design

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

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

我在iframe的头部使用这个:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

谢谢!

小智 9

Mobile Safari似乎无法识别iframe上的宽度属性,但可识别最小宽度.

iframe{
  width: 1px;
  min-width: 100%;
}
Run Code Online (Sandbox Code Playgroud)


wat*_*att 4

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