检测捏缩放iOS [英] detecting pinch to zoom on iOS

问题描述

我正在尝试在iOS（和Android上）检测到缩放缩放事件，因为我正在使用jQuery Mobile来显示带有固定标头的页面。在一个梦想世界里，我想要的是标题不要缩放，而是让页面的其余部分这样做。但我知道这是不可能的。

在大多数网页上我都有一个移动版本可以很好地调整自己的缩放比例，但在封面上是客户端希望用户能够看到整个页面（缩小到适合），固定标题大到足以使用（即与移动优化页面成比例的相同大小），并且能够放大封面图像 - 将标题栏保留在相同大小的位置。

问题是，一旦用户捏放大，这个标题栏就不一定很大了。 / p>

所以我希望能够做的是检测当前收缩的缩放级别并缩小固定的标题栏，使其看起来大小相同（相对于当底层页面被放大时，周围的电话界面。

我基本上可以使用适合100％宽度div的图像，但我需要该div来重新安装缩放后留下的实际可见区域，并以拖动为中心。

我也想参与jQuery Mobile转换的一部分，将缩放设置为1：1的动画，以便下面的页面是移动友好不会放大，因为它们不需要放大。

所以有任何想法从何处开始？

解决方案

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

  $（container）.bind（gesturechange，function（event）{
 
 var scale = event.originalEvent.scale; 
 
 ...在这里为标题做一些逻辑。
}）; 
  

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

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

I am trying to detect a pinch to zoom event on iOS (and Android really) because I am using jQuery Mobile to show pages with a fixed header. In a dream world what I'd like is for the header not to zoom but for the rest of the page to do so. But I know this is not possible.

On most pages I have a mobile version that resizes itself nicely making zooming un-necessary, but on the 'front cover' the client wants the user to be able to see the whole page (shrunk to fit) with the fixed header large enough to be usable (i.e. the same size proportionately as on the mobile optimised pages) and to be able to zoom in on just the cover image- leaving the header bar where it is at the same size.

The trouble is that once the user pinches to zoom in, this header bar becomes un-necessarily large.

So what I'd like to be able to do is detect the current pinched zoom level and scale down the fixed header bar so it 'looks' the same size (relative to the surrounding phone interface) while the underlying page is zoomed in.

I could basically do this with images that fit a 100% width div but I need that div to refit the actual visible area that is left after the zoom, and center itself on drag.

I'd also like to make part of the jQuery Mobile transition, animate the zoom back to 1:1 so the following pages that are 'mobile friendly' are not zoomed in, since they do not need to be.

So has anyone any ideas where to start here?

解决方案

You can attach an event to the the body/container of your main page that will report the current scale level. For example, using jQuery:

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

       var scale = event.originalEvent.scale;

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

If you don't use "event.preventDefault", the entire page should scroll correctly, and the header should correct itself as per your logic. You might also want to bind to the "gesturestart", and the "gestureend" events.

Further reading/explanation: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

这篇关于检测捏缩放iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！