检测捏缩放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",则整个页面应该正确滚动,并且标题应根据您的逻辑自行更正.您可能还想绑定到"gesturestart"和"gestureend"事件.