如何在 iPhone 纵向视图中获得 100% 的 iframe 宽度答案

【问题标题】：How to get iframe width 100% in iPhone portrait view如何在 iPhone 纵向视图中获得 100% 的 iframe 宽度
【发布时间】：2013-12-06 02:23:24
【问题描述】：

基本上我和here有同样的问题，但是因为他从来没有得到好的答案，所以我重新发布了这个问题。

所以问题在于，只有在 iPhone Safari 中，纵向视图上的 width="100%" 似乎行为不端，并赋予 IFrame 横向宽度。而且我似乎无法弄清楚这里发生了什么。

我正在使用正确的视口：

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

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

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

我使用的 iPhone 是 iPhone 5 iOS 7.0.2

PS。请不要在窗口调整大小时手动调整 iframe 大小的地方发布任何 JS 答案，我目前正在寻找非 JS 修复程序，这是我计划使用的最后一个选项。另外，如果您在 iPhone 纵向视图宽度上将 min-width 设置为 320px，请不要发布 @media CSS 答案，由于各种原因，这对我不起作用。

【问题讨论】：

标签： iphone css

【解决方案1】：

这里有答案：iframe size with CSS on iOS

只需将 iframe 包装在一个 div 中：

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

http://jsfiddle.net/R3PKB/7/

【讨论】：

嗯，这是您摆脱无缝属性并可以在 iOS Safari 中滚动 iframe 内容的标准方式，但给定的问题是关于如何让 iframe 将自身调整为没有滚动条的容器元素

【解决方案2】：

好的，经过数小时的调试，我终于找到了我想要的解决方案，但不幸的是它不是纯 CSS 解决方案：

您必须应用的 CSS 如下：

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

如果您将宽度设置为低于纵向宽度并将最小宽度设置为 100%，那么您将得到width: 100%，但这一次是一个实际工作的版本，现在 iframe 采用实际的容器宽度和不是横向宽度。 *width: 100%; 在那里，所以在 IE6 中宽度仍然是 100%。

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

【讨论】：

有点旧，但这里有解决scrolling="no" 问题的方法：stackoverflow.com/questions/23083462/…
@pnichols 是的，我知道，那时我完全开始理解这个问题并找到了所有可能的解决方案。最初的问题是 iOS 默认将 iFrames 无缝属性设置为 TRUE 并且不能被覆盖。我想过修改这个问题，但在 Meta 中我被告知，因为我需要更改这个问题并回答这么多，最好问一个新问题。如果您遇到此问题，请检查我所做的其他问答，它解释了何时发生此问题以及如何解决它以及何时实际需要 scrolling="no" 以及何时可以省略它。