Android 4.x HTML 缩小包含 iFrame 的 div 会导致 iFrame 内容被截断答案

【问题标题】：Android 4.x HTML Scaling down div containing an iFrame causes iFrame content to appear truncatedAndroid 4.x HTML 缩小包含 iFrame 的 div 会导致 iFrame 内容被截断
【发布时间】：2014-08-29 23:25:38
【问题描述】：

我有一个包含 iFrame 的 div 网页。我已经应用 webkit-transform 来缩小 div：。在桌面浏览器和 iOS 上，这可以正常工作，但在 Android 4.0.x 上，iFrame 的内容会被截断。截断量与发生的缩放量成正比，即如果我将 div 缩小到 0.5，则只有 50% 的缩小 iFrame 可见。

You can test this link on Android stock browser。 iFrame 覆盖了正确的区域，但可见内容甚至是该区域的 50%。有趣的是，如果比例大于 1，则不会出现此问题。

此行为会在所有 Android 4.0 设备和某些 4.1 设备上复制而不会失败。

请针对此问题提出任何解决方法。

【问题讨论】：

标签： javascript android css iframe webkit-transform

【解决方案1】：

您正在调整 iframe（容器）的大小，但如果内容（iframe）与容器的大小不匹配。将出现滚动以显示 iframe 的内容。在 iframe 具有 scroll = "no" 的情况下，其内容将被剪切。您应该尝试将 width = "100%" 放入 iframe 中包含的元素。希望对您有所帮助（7 个月后）。

【讨论】：