如何在iPhone纵向视图中获取iframe宽度100％ [英] How to get iframe width 100% in iPhone portrait view

问题描述

基本上，我遇到的问题与这里

Basically I am having the same problem as here, but because he never got a good answer I am reposting the question.

因此问题是只有在iPhone Safari中 width = 100％在纵向视图上似乎是行为不端，并给予IFrame横向宽度。我似乎不知道这里发生了什么。

So the problem is that only in iPhone Safari the width="100%" on the portrait view seems to be misbehaving and giving the IFrame the landscape width. And I can't seem to figure out what is going on here.

我使用正确的视口：

I am using the correct viewport:

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

IFrame中的网站实际上可以比320像素窄，并且定义相同的视口。 （我读过一个类似的问题，这可能是一个因素，所以我只是澄清）。

And the site within the IFrame can actually go way narrower than 320px and also has the same viewport defined. (I've read on one of the similar questions that this can be a factor so I am just clarifying).

在调试器中我可以看到，被添加，iFrame的offsetWidth是304px这是正确的，加载后它是588px，这是正确的横向视图。但为什么它改变了我不知道。 IFrame中的网页来自不同的网域，因此无法产生影响，且主网页不会对iframe的宽度做任何处理。

In the debugger I can see, that before the URL was added, the iFrame's offsetWidth was 304px which is correct and after the load it was 588px, which is correct for the landscape view. But why it changed I have no idea. The page within the IFrame comes from a different domain so that could not effect it and the main page does not do anything with the iframe's width.

我使用的iPhone iPhone 5 iOS 7.0.2

The iPhone I am using is an iPhone 5 iOS 7.0.2

PS。请不要发布任何JS答案，你在窗口大小手动调整大小的iframe，我目前正在寻找非JS修复，这是我计划使用的最后一个选项。也请不要发布@media CSS答案你在iPhone纵向视图宽度上设置 min-width 到320px，因为各种原因不会为我工作。

PS. Please do not post any JS answers where you resize the iframe manually on window resize, I am currently looking for a non JS fix, and this is my last option that I plan to use. Also please do no post the @media CSS answer were you set min-width to 320px on iPhone portrait view width, that would not work for me for various reasons.

推荐答案

确定，所以经过几个小时的调试后，我终于找到了我的解决方案，但不幸的是不是一个纯CSS解决方案：

OK so after hours of debugging I finally found the solution I was after, but unfortunatelyit is not a pure CSS solution:

您必须应用的CSS如下：

The CSS you must apply is this:

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

如果将宽度设置为低于纵向宽度， width到100％，那么你sill get width：100％，但这次是一个实际工作的版本，现在的iframe取实际容器宽度而不是横向宽度。 * width：100％; 就是这样，在IE6中的宽度仍然是100％。

If you set the width to lower than the portrait width and set the min-width to 100%, then you sill get width: 100%, but this time a version that actually works and now the iframe takes the actual container width and not the landscape width. The *width: 100%; is there so that in IE6 the width would still be 100%.

这只适用于iframe属性 scrolling =no，如果允许滚动，那么它不再工作了。因此，在某些情况下，这可能会限制其有用性。

However this only works with the iframe attribute scrolling="no", if the scrolling is allowed, then it does not work anymore. So this might limit it's usefulness in some cases.

这篇关于如何在iPhone纵向视图中获取iframe宽度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！