关于html：iFrame宽于iPhone 6的整个屏幕


iFrame wider than the entire screen on iPhone 6

真的可以在这一方面使用帮助。

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

1
<iframe id="ourIframe" style="position: fixed; width: 100%; height: 100%"></iframe>

Android可以正常工作。

我找不到在线的单个资源与此问题。

请帮忙。
提前致谢。

相关讨论

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

1.只需将iframe包装在div中即可：

overflow: auto;-webkit-overflow-scrolling:touch;

这是您的示例：http://jsfiddle.net/R3PKB/7/

2.或者，您可以使用CSS尝试以下操作：

1
2
3
4
5
iframe {
         width: 1px;
         min-width: 100%;
         *width: 100%;
    }

如果您将宽度设置为小于纵向宽度，并且将最小宽度设置为100％，那么您将获得width：100％，但这一次是实际可行的版本，现在iframe会使用实际的容器宽度，而不是景观宽度。 *宽度：100％；是否存在，以便在IE6中宽度仍为100％。

但是，这仅适用于iframe属性scrolling =" no"，如果允许滚动，则它将不再起作用。因此，这在某些情况下可能会限制其用途。

这是更详细答案的链接

相关讨论

由于iFrame的"固定"定位，

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

    • 所以这里是jsFiddle示例

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

    以我的经验，解决此问题的最佳方法是给多个边界赋予界限，即在多个媒体查询上设置最大宽度/最小宽度。对于更激烈的样式而言，这可能是一件痛苦的事，但是对于一个iFrame，我认为可以做到：

    的CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    #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

    1
    <iframe id="ourIframe"></iframe>