CSS

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

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

1。只需将iframe包装在div中：

overflow：auto; -webkit-overflow-scrolling：touch;

以下是您的例子：http://jsfiddle.net/R3PKB/7/

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

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

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

然而，这仅适用于iframe属性scrolling =＆＃34; no＆＃34;，如果允许滚动，则它不再起作用。因此，这可能会限制它在某些情况下的实用性。

以下是link更详细的答案

Answer 2

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

根据我的经验，解决此问题的最佳方法是在多个媒体查询中提供多个边界，即最大宽度/最小宽度。对于更强烈的造型来说，这可能是一种痛苦，但对于一个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 3

由于iFrame的“固定”定位，

必须有设置宽度为320px或100vw;
第二个iFrame的高度和宽度必须是继承的; height:inherit; width:inherit;不要超过屏幕边界。

所以here jsFiddle example

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

3 个答案:

CSS

HTML