Question

修改 这些问题似乎已由iOS8修复。将此问题视为iOS7及更早版本的错误。

我有一些内容（受CORS影响），我在iframe服务，我希望始终在浏览器窗口的底部延伸。我需要这个内容来保持相同的宽高比并填充浏览器的整个宽度，否则事情看起来会很奇怪。因为我无法访问iframe的内容，所以我正在使用-webkit-transform：scale来正确调整所有内容的大小。

我正在计算scaleFactor：

width = 600; // this is the original width of the iframe's contents and never changes
scaleFactor = window.innerWidth/width;

然后，每当window.innerWidth改变大小时，我都会根据scaleFactor设置一些CSS：

$container.css({
    'width': (width * scaleFactor) + 'px',
    'height': (height * scaleFactor) + 'px',
    'padding': 0
});
$iframe.css({
    '-webkit-transform': 'scale('+scaleFactor+')',
    'transform': 'scale('+scaleFactor+')',

    '-webkit-transform-origin': '0 0',
    'transform-origin': '0 0'
});

这适用于除 iOS之外的每个地方，如果你放大太远，它会开始崩溃。 iFrame开始偏离页面并且不够宽。我不知道这里发生了什么。

我正在谈论的图像：Good scaling，Bad scaling。

我有一个test page setup here可以清楚地演示任何iOS上的问题。

有人有什么想法吗？

Answer 1

这是我放弃之前进行广泛调查的结果。

应用转换涉及两个主要问题：缩放到iOS上的iframe内容。第一个是我在原始问题中指出的，如果您使用固定位置元素，内容将开始偏离页面上指定的位置。它的工作原理似乎是基于元素的原始大小，比例因子，以及可能是视口宽度。在我的测试中，当大于0.85的任何因子缩放时，大元素可能会完美地缩放和定位。只要比例因子至少> 3.5，就可以完美地定位小元件。它看起来几乎是随机的，所以我没有打算确定具体点是什么。

我没有在相对定位的元素上尝试这个，但我假设它们的功能类似于固定位置元素。

这有一个相当复杂的解决方法，包括使用滚动偏移和innerHeight使用固定在页面底部的绝对定位元素。即：

container.css('top', (document.body.scrollTop + window.innerHeight - container.height()) + 'px');
container.css('left', document.body.scrollLeft);

并且在每次拖动，变换，捏合，调整大小等时更新它。此方法涉及一些奇怪（iOS不会在拖动完全停止之后更新滚动偏移）但是如果你绝对不得不这样做它是可行的做到这一点。

然而，即使这是可能的，当您在iOS上缩放iframe内容时，如果您有任何锚标签（或其他需要点击的元素），则可点击区域保持不缩放。如果您在锚标记内部有200x100的图像，并且将其缩放2x，则图像将是两倍大，但锚点仅响应前200x100。使用iOS模拟器，如果双击可点击区域外的图像，Safari甚至可以使原始边界变暗，这样您就可以知道可以点击的位置。如果你想显示除了不需要点击或其他输入的文本/图像以外的任何东西，这几乎是一个交易破坏者。更多信息：

CSS3 Transform scaling issue on IPad Safari

"-webkit-transform: scale(2)" doesn't affect click area of Facebook Like Button (on iPad)

在Apple修复移动版Safari中的这些长期存在的错误之前，似乎尝试使用webkit-transform扩展iframe内容并不是一个可行的选择，除非你只是针对Chrome。

修改

Demo of scaling issues here

Answer 2

iframe，变换比例和ios的组合非常棘手。

存在变换规模的错误。并不总是在你的掌控之中。

您可以尝试缩放属性而不是缩放，并使用不受支持的firefox缩放。

我这里没有ios，所以我无法检查，但它通常会产生奇迹。虽然您可能在缩放文本中遇到换行符问题。

缩放解决Chrome中的this bug

-webkit-transform：在iOS上放大时缩放分解

2 个答案: