CSS 如何在 iPhone 纵向视图中获得 100% 的 iframe 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20123960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get iframe width 100% in iPhone portrait view
提问by Idra
Basically I am having the same problem as here, but because he never got a good answer I am reposting the question.
基本上我和这里有同样的问题，但因为他从来没有得到好的答案，所以我重新发布了这个问题。
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.
所以问题是，只有在 iPhone Safari 中width="100%"，纵向视图似乎行为不端，并为 IFrame 提供了横向宽度。我似乎无法弄清楚这里发生了什么。
I am using the correct viewport:
我正在使用正确的视口：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
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 中的站点实际上可以比 320 像素更窄，并且还定义了相同的视口。（我读过一个类似的问题，这可能是一个因素，所以我只是澄清一下）。
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.
在调试器中我可以看到，在添加 URL 之前，iFrame 的 offsetWidth 是 304px，这是正确的，加载后它是 588px，这对于横向视图是正确的。但为什么它改变了我不知道。IFrame 中的页面来自不同的域，因此无法对其产生影响，并且主页不会对 iframe 的宽度执行任何操作。
The iPhone I am using is an iPhone 5 iOS 7.0.2
我使用的 iPhone 是 iPhone 5 iOS 7.0.2
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-widthto 320px on iPhone portrait view width, that would not work for me for various reasons.
附注。请不要在窗口调整大小时手动调整 iframe 大小的地方发布任何 JS 答案，我目前正在寻找非 JS 修复程序，这是我计划使用的最后一个选项。另外，如果您min-width在 iPhone 纵向视图宽度上设置为 320 像素，请不要发布 @media CSS 答案，由于各种原因，这对我不起作用。
回答by Idra
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:
您必须应用的 CSS 是这样的：
iframe {
min-width: 100%;
width: 100px;
*width: 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%.
如果您将宽度设置为低于纵向宽度并将最小宽度设置为 100%，那么您将得到width: 100%，但这次是一个实际有效的版本，现在 iframe 采用实际容器宽度而不是横向宽度。的*width: 100%;是存在使得在IE6宽度仍然是100％。
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.
然而，这只适用于 iframe 属性scrolling="no"，如果允许滚动，则它不再起作用。因此，在某些情况下，这可能会限制它的用处。
回答by Luke Knepper
It is answered here: iframe size with CSS on iOS
答案在这里：iframe size with CSS on iOS
Simply wrap your iframe in a div with:
只需将您的 iframe 包装在一个 div 中：
overflow: auto;
-webkit-overflow-scrolling:touch;
