detectando pellizcar para ampliar en iOS

Question

Estoy intentando detectar un pellizco para acercar el evento en iOS (y Android realmente) porque estoy usando jQuery Mobile para mostrar páginas con un encabezado fijo. En un mundo de sueños, lo que me gustaría es que el encabezado no se acerque, pero que el resto de la página lo haga. Pero sé que esto no es posible.

En la mayoría de las páginas tengo una versión móvil que cambia de tamaño muy bien haciendo innecesario el zoom, pero en la "portada" el cliente quiere que el usuario pueda ver toda la página (encogida para ajustarse) con el el encabezado es lo suficientemente grande como para ser utilizable (es decir, tiene el mismo tamaño proporcionalmente que en las páginas optimizadas para dispositivos móviles) y para poder acercar solo la imagen de portada, dejando la barra de encabezado donde está en el mismo tamaño.

El problema es que una vez que el usuario pellizca para acercar, esta barra de encabezado se vuelve innecesariamente grande.

Entonces, lo que me gustaría poder hacer es detectar el nivel de zoom pellizcado actual y reducir la barra de encabezado fijo para que tenga el mismo tamaño (relativo a la interfaz del teléfono circundante) mientras la página subyacente zoom in.

Básicamente podría hacer esto con imágenes que se ajusten a una div del ancho del 100%, pero necesito ese div para reajustar el área visible real que queda después del zoom, y centrarme en el arrastre.

También me gustaría hacer parte de la transición de jQuery Mobile, animar el zoom de nuevo a 1: 1 para que las siguientes páginas que son "amigables para dispositivos móviles" no se amplíen, ya que no es necesario.

¿Alguien tiene alguna idea de por dónde empezar aquí?

Answer 1

Puede adjuntar un evento al cuerpo/contenedor de su página principal que informará el nivel de escala actual. Por ejemplo, usando jQuery:

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

     var scale = event.originalEvent.scale; 

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

Si no se utiliza "event.preventDefault", la página entera debe desplazarse correctamente, y la cabecera debe corregirse a sí misma como por su lógica. También es posible que desee vincularse a los eventos "gesturestart" y "gestureend".

Otras lecturas/explicación: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 2

"En un mundo de sueño lo que me gustaría es que la cabecera no para hacer un zoom pero para el resto de la página para hacerlo."

Puede configurar header.style.WebkitTransform = 'scale(' + zoomvalue + '); dentro del evento gesturechange para "deshacer" el nivel de zoom (simule un encabezado sin zoom).

Haga que su encabezado tenga un ancho fijo, y aplique un aumento de proporción entre ese ancho y window.innerWidth.

AFAIK no hay manera de averiguar el nivel de zoom real, porque depende de device-independent-pixel (DIP) a razón de píxel lógico, y AFAIK no hay forma de averiguarlo desde JavaScript.