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

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

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 ="no",如果允许滚动,则它不再起作用.所以这可能会限制它在某些情况下的用处.

这是一个更详细的答案的链接