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

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