iphone - iOS Safari (iPhone) 中 iframe 内容的大小

Question

我有一些内容有问题，我(遗憾地)需要使用 iframe。 (这与挑剔的客户和域名有关 - 这不在我的手中......)

这是带有 iframe 的页面: http://madslund.dk/test/iframepage.html

这是包含实际内容的页面: http://madslund.dk/test/content.html

iframe 页面基本上只显示其他页面的内容。到目前为止没问题。

问题来了:里面的内容有一个设置的宽度(700 像素)，但会调整大小以适合屏幕(CSS 中的最大宽度:100%)。这在浏览器中查看两个页面时效果很好，但在 iPhone 上，它仅在您直接查看内容页面时有效。

Javascript:alert(window.outerWidth) 在 iframepage.html 中输出 320(如预期)，但在 content.html 中输出 735。所以看起来 iphone 只是简单地调整了 iframe 的大小以适应里面的内容。

Answer 1

在 iOS 7 中，Mobile Safari 似乎默认打开了 iframe 的无缝属性，无法将其关闭。 (或者至少在 Mobile Safari 上形成我自己的测试，这符合情况。)到目前为止，我还没有找到一种方法来使 IFrame 响应并保留框架的滚动，但如果你愿意牺牲垂直滚动你可以使用这段代码:

HTML:

<iframe scr="content.html" scrolling="no"></iframe>

CSS:

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

此解决方案以跨浏览器的方式工作，但请记住，如果您将滚动设置为"is"，那么它将不再滚动，因此您需要知道内容的高度。