检测夹点以在iOS上缩放

Question

我正在尝试检测iOS (真的是安卓系统)上的缩放事件，因为我正在使用jQuery移动来显示带有固定标题的页面。在梦幻世界里，我想要的不是页眉缩放，而是页面的其余部分缩放。但我知道这是不可能的。

在大多数页面上，我有一个移动版本，它可以很好地调整自己的大小，使得缩放没有必要，但在“封面”上，客户希望用户能够看到整个页面(缩小到合适的大小)，固定的页眉足够大到可以使用(即与移动优化的页面按比例相同的大小)，并且能够仅放大封面图像-让标题栏保持相同的大小。

问题是，一旦用户想要放大，这个标题栏就会变得不必要地变大。

所以我想要做的是检测当前的缩放级别，并缩小固定的标题栏，以便在放大底层页面时，它看起来与周围的手机界面大小相同。

我基本上可以对适合100%宽度的div的图像执行此操作，但我需要该div重新调整缩放后留下的实际可见区域，并将其自身置于拖动中心。

我也想让jQuery移动过渡的一部分，动画缩放回到1:1，这样下面的页面是‘移动友好’不会被放大，因为他们不需要。

那么，有没有人知道该从哪里开始呢？

Answer 1

您可以将事件附加到将报告当前缩放级别的主页的正文/容器。例如，使用jQuery：

  $(container).bind("gesturechange", function(event) {

       var scale = event.originalEvent.scale;

      ...do some logic for header here. 
  });

如果您不使用"event.preventDefault"，整个页面应该正确滚动，标题应该根据您的逻辑进行自我更正。您可能还想绑定到"gesturestart“和"gestureend”事件。

进一步阅读/解释：http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 2

“在梦幻世界里，我想要的不是页眉缩放，而是页面的其余部分缩放。”

您可以在gesturechange事件中设置header.style.WebkitTransform = 'scale(' + zoomvalue + ');来“撤消”缩放级别(模拟非缩放标题)。

将页眉设置为固定宽度，并在该宽度和window.innerWidth之间按比例进行缩放。

没有办法找出实际的缩放级别，因为它取决于device-independent-pixel (DIP)与逻辑像素的比率，并且AFAIK没有办法从JavaScript中找出这一点。