我有一个针对移动设备(例如 iPhone 和 Android)的网页。此页面有一个 <iframe> (这显然包括另一个要呈现的网页)。在 iPhone 上，页面(和 iframe)呈现正常。我已经设置了 <meta name="viewport" content="width=device-width" /> ，这应该可以将视口(viewport)宽度设置为大约 320ish(或 safari 现在使用的任何内容)。但是，我的 iframe 中的内容比 320ish 像素宽。
这会导致问题，因为 iframe 被截断了。 iPhone 网络浏览器仅显示 iframe 内容的左侧。因为我有 width=device-width ，我无法向左或向右滚动/平移以查看其余内容。我也无法缩小/放大以“给自己更多的屏幕空间”。
我可以通过设置宽视口(viewport)(例如 width=800" )来解决这个问题，这样可以确保 iframe 可见。但是 (a) 页面的其余部分看起来更糟，因为它比它应该的更宽，并且 (b) 我不确定我是否可以依赖它始终适合 800 像素，所以我不能确定这会解决所有问题.
有没有办法确保 iframe 的内容始终可见，最好是热衷于 width=device-width
FTR 我使用的是 iPhone 3。这个问题不会发生在 Android (2.2) 上，默认网络浏览器会将 iframe 的内容“溢出”到 iframe 之外，您可以向左/向右滚动。
最佳答案
我的 HTML 5 网络应用程序也遇到了同样的问题。
添加溢出:自动； -webkit-overflow-scrolling:touch; 到您的 iframe 容器的样式将允许在 iOS 5 中滚动，但是这可能不会 100% 解决您的问题，因为现在我的 iframe 没有在可滚动区域中呈现内容。
编辑:此解决方案(归功于原始用户)是 iframe 的绝佳替代品: https://stackoverflow.com/a/8529312/1101107
关于iphone - 具有宽 iframe 的网页在具有视口(viewport)的 iPhone 上不可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6122744/