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

Question

真的可以使用这个帮助。

我正在尝试在我的网站中打开一个应该覆盖整个屏幕的 iFrame。 不幸的是，在 iPhone 6 及更高版本中，它的宽度实际上更大。 我们在 iframe 旁边有一个宽 div。当我删除它时，一切正常。 标记和样式非常简单：

<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe" style="position: fixed; width: 100%; height: 100%"></iframe>

Android 工作正常。

我在网上找不到与此问题相关的资源。

请帮忙。 提前致谢。

Answer 1

我有时会在移动浏览器上遇到类似问题。不同浏览器处理某些样式布局的方式存在一些关键差异。

根据我的经验，解决此问题的最佳方法是提供多个边界，即多个媒体查询的最大宽度/最小宽度。对于更强烈的造型来说，这可能会让人头疼，但我认为只需一个 iFrame 就可以做到：

CSS

#ourIframe {
  display: block; /* Because you don't know if the document has altered css rules for iFrames */
  clear: both; /* Because you have no idea what css could be applied to #someDiv - although with position: fixed, this shouldn't be necessary at all... */
  position: fixed;
  width: 100%; /* Fall back in case the vw is not supported. */
  width: 100vw;
  height: 100%; /* Fall back */
  height: 100vh;
  overflow-x: hidden; /* in case there is a few pixels spillage from padding, you don't want a horizontal scroll bar. */
  overflow-y: auto; /* Only gives the scroll bar if needed.*/ 
}

@media screen and (max-width: 320px) { /* iPhones 4 & 5 */
  #ourIframe {
    max-width: 320px;
    min-width: 320px;
  }
}

@media screen and (max-width: 375px) { /* iPhone 6 */
  #ourIframe {
    max-width: 375px;
    min-width: 375px;
  }
}

HTML

<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe"></iframe>

Answer 2

由于 iFrame 的“固定”定位，

1. 必须有一个设置宽度为 320px 或 100vw 的父 div 元素；
2. 必须继承第二个 iFrame 的高度和宽度； height:inherit; width:inherit;不超过 屏幕边界。

所以here jsFiddle example

Answer 3

有两种方法可以实现您的解决方案。

1. 只需将您的 iframe 包装在一个 div 中：

溢出：自动；-webkit-overflow-scrolling：触摸；

这是你的例子：http://jsfiddle.net/R3PKB/7/

2. 或者您可以使用 css 尝试：

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

如果您将宽度设置为低于纵向宽度并将最小宽度设置为 100%，那么您将获得宽度：100%，但这次是实际工作的版本，现在 iframe 采用实际的容器宽度而不是横向宽度。 *宽度：100%；是不是这样在 IE6 中宽度仍然是 100%。

但是，这只适用于 iframe 属性 scrolling="no"，如果允许滚动，则它不再起作用。所以这可能会限制它在某些情况下的用处。

这里是link 以获得更详细的答案