如何在 iPhone 竖屏视图中获取 iframe 宽度为 100%

Question

17

基本上，我遇到了与这里相同的问题，但由于他没有得到好的答案，所以我重新发布了这个问题。

问题是，在iPhone Safari中，仅在纵向视图中width="100%"似乎出现问题，并且给IFrame横向宽度。我似乎无法弄清楚发生了什么。

我正在使用正确的viewport：

<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答案，其中您将在iPhone纵向视图宽度上设置min-width，由于各种原因，这对我不起作用。

- Idra

2个回答

1

这里有答案：如何在iOS上使用CSS设置iframe大小只需将您的iframe放入一个带有以下代码的div中即可：

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

- Luke Knepper

3

这是消除无缝属性并允许在iOS Safari中滚动iframe内容的标准方法，但给出的问题是如何使iframe自适应容器元素大小而没有滚动条。 - Idra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Idra · Accepted Answer

好的，经过数小时的调试后，我终于找到了我需要的解决方案，但不幸的是这不是一个纯粹的CSS解决方案：

你必须应用的CSS代码如下：

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

如果你将宽度设置为小于纵向宽度并将最小宽度设置为100％，那么你仍然会得到 width: 100%，但这次是一个实际有效的版本，现在 iframe 将获取实际容器宽度而不是横向宽度。 *width: 100%; 是为了让 IE6 中仍然保持宽度为100%。

然而，这只适用于 iframe 属性 scrolling="no"，如果允许滚动，则不再起作用。因此，在某些情况下，这可能限制其实用性。