jquery - 在 iOS 上检测捏合缩放

Question

我正在尝试检测 iOS(实际上是 Android)上的缩放事件，因为我正在使用 jQuery Mobile 来显示具有固定标题的页面。在梦想世界中，我希望页眉不缩放，但页面的其余部分缩放。但我知道这是不可能的。

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

麻烦的是，一旦用户捏合放大，这个标题栏就会变得不必要的大。

所以我想做的是检测当前的收缩缩放级别并缩小固定标题栏，使其在缩放基础页面时“看起来”大小相同(相对于周围的手机界面)中。

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

我还想成为 jQuery Mobile 转换的一部分，将缩放设置为 1:1 的动画，这样“移动友好”的以下页面就不会放大，因为它们不需要。

那么有人知道从哪里开始吗？

Answer 1

您可以将事件附加到主页的主体/容器，以报告当前的比例级别。例如，使用 jQuery:

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

       var scale = event.originalEvent.scale;

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

如果您不使用“event.preventDefault”，整个页面应该可以正确滚动，并且页眉应该根据您的逻辑自行更正。您可能还想绑定(bind)到“gesturestart”和“gestureend”事件。

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