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 fo

Answer 1

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

Answer 2

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