如何在iPhone纵向视图中获取iframe宽度100%

Question

基本上我和这里有同样的问题,但因为他从来没有得到一个好的答案,我正在重新提出这个问题.

所以问题是只有在iPhone Safari中width="100%",纵向视图似乎行为不端并且给IFrame提供了横向宽度.我似乎无法弄清楚这里发生了什么.

我正在使用正确的视口:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

并且IFrame中的网站实际上可以比320px更窄,并且还具有相同的视口定义.(我读过一个类似的问题,这可能是一个因素所以我只是澄清).

在调试器中我可以看到,在添加URL之前,iFrame的offsetWidth是304px,这是正确的,加载后它是588px,这对于横向视图是正确的.但为什么它改变了我不知道.IFrame中的页面来自不同的域,因此不能影响它,主页面不会对iframe的宽度做任何事情.

我使用的iPhone是iPhone 5 iOS 7.0.2

PS.请不要发布任何JS答案,你在窗口调整大小手动调整iframe大小,我目前正在寻找一个非JS修复,这是我打算使用的最后一个选项.另外请不要发布@media CSS的答案你min-width在iPhone的纵向视图宽度上设置为320px,这对我来说因各种原因不起作用.

Answer 1

好的,经过几个小时的调试后我终于找到了我想要的解决方案,但不幸的是,这不是一个纯粹的CSS解决方案:

您必须应用的CSS是:

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

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

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