detecting pinch to zoom on iOS

Question

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?

Nose

Were you able to attach using the gesture events? – Mother

Answer 1

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

Mother

Answer 2

" 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."

You can set header.style.WebkitTransform = 'scale(' + zoomvalue + '); within the gesturechange event to "undo" the zoom level (simulate a non-zooming header).

Make your header a fixed width, and apply a zoom in proportion between that width and window.innerWidth.

AFAIK there is no way to find out the actual zoom level, because it depends upon the device-independent-pixel (DIP) to logical-pixel ratio, and AFAIK there is no way to find out that from JavaScript.

Spiral