如何在 iOS UIWebView 中缩放 iFrame答案

【问题标题】：How to scale an iFrame inside of iOS UIWebView如何在 iOS UIWebView 中缩放 iFrame
【发布时间】：2015-04-30 04:29:46
【问题描述】：

问题：

我发现原生 iOS UIWebView 在 CSS3 方面存在问题 transform:scale3D(scalar, scalar, 1)

我们有一个<iframe>，其中包含像素完美的艺术，由许多元素（文本、矩形、视频等）组成，我的任务是缩放<iframe>，使其适合全屏，而不仅仅是设计的 320x480什么的

首先，触摸事件根本不会传播。其次，当用户按住 <iframe> 时，他们可以看到元素的 DOM 轮廓在之前的、不正确的位置、不正确的大小（在 <iframe> 缩放以适应屏幕之前）

蓝色区域应该是整个屏幕，而不是原来的位置

最重要的是，有时缩放会引入 UIWebView 决定不重新绘制的随机水平/垂直线

我的尝试：

我尝试使用 css zoom:，我知道这在某种程度上替代了 <meta> 标记视口缩放，但我仍然看到随机未上漆的线条。我不确定我是否尝试过使用硬件加速（在 z / 3d 空间中转换），但我很确定我做到了，与常规 transform:scale3d 方法相同

我还尝试爬取配置对象，该对象具有x、y、width、height 等属性，但似乎某些属性需要舍入而其他属性不需要（文本字体大小和字母间距，例如边框宽度等）。光栅化令人头疼，我似乎无法获得像素完美的缩放<iframe> 我不确定哪些元素支持十进制px CSS，所以我正在考虑将所有内容转换为em

我还没有使用实际的<meta> 标签，因为它不能被动态附加。在渲染DOM 之前需要在HTML 上。我没有使用<meta> 的另一个原因是因为我需要在编写<meta> 属性之前知道视口大小（如果有人确认此解决方案有效，我可以从本地对应方查询）

问题：

以前有人遇到过这个问题吗？考虑到标量可能是 1.333333，是否可以获得像素完美的缩放表示？我知道 Apple 正在用可嵌入的 Safari 实现替换 UIWebView（移动 Web 对我的用例来说很好，只是不适用于原生 iOS），但与此同时，iOS 有希望吗？链接高度赞赏！提前谢谢..

【问题讨论】：

标签： javascript ios css uiwebview scale

【解决方案1】：

我的同事找到了答案！

答案：

您无法从外部 DOM 扩展 <iframe>，您必须将 postMessage() 扩展到 <iframe> 并使用 document.body.style.webkitTransform = "scale(1337)"

希望这可以帮助其他有需要的人！

功劳最终归于http://adexcite.com/iframe_scaling_test.html

【讨论】：