Pinch zoom in, zoom out – javascript / jquery / jquery eventos móviles para la web en la plataforma android?

¿Cuáles son los eventos javascript o jquery o jquery móviles involucrados en el pellizco acercar y alejar? Estoy tratando de capturar esos eventos para acercar y alejar la imagen de una imagen que está dentro de una div sin afectar el diseño completo de la página web. La manera más simple de detectar una pinch funciona para iPad pero no para Android.

¿Cuáles son la forma equivalente de detectar lo mismo en la plataforma android para la web?

Cualquier ayuda es apreciada.

EDIT: He estado intentando touchy.js y que funciona para hacer zoom-in y zoom-out para las imágenes, pero el zoom en una imagen no es útil si parte de la imagen no es accesible por dedo deslizar o algo así .

Por ejemplo, considere el código siguiente:

<div style=" border: 1px solid blue; width: 560px; overflow:scroll;"> <p>&nbsp;</p> <img id="image" src="images/tux.png" alt="my image" style=" border: 1em solid gray;" /> </div> 

Necesito la imagen para permanecer dentro de la div y el usuario debe ser capaz de moverse alrededor de la imagen después de acercar. Pero con este código, tengo que deslizar mi dedo en la región vacía (creado por la etiqueta de párrafo) con el fin de Ir a la parte diferente de la imagen horizontalmente. Lo mismo sucede verticalmente (tendrás que deslizar el dedo sobre un espacio vacío en la página web para ver la longitud de la imagen). Lo que estoy tratando de decir es, deslizar el movimiento dentro de la imagen no tiene ningún efecto, mientras que los usuarios esperan hacer eso después de acercar la imagen.

Es muy difícil de explicar sin un ejemplo y he intentado crear http://jsfiddle.net/Debarupa/8peaf/ pero no funciona como me gustaría que ya que no puedo editar el meta en la cabeza. Necesitaba añadir:

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1" /> 

De modo que la página web entera no es zoomable.

One Solution collect form web for “Pinch zoom in, zoom out – javascript / jquery / jquery eventos móviles para la web en la plataforma android?”

Puedes calcular tu propia escala supervisando el gesto del usuario y siguiendo los puntos de contacto de sus dedos.

Algo como:

 var tracks = []; $myElement.on("touchmove", function (event) { //only run code if the user has two fingers touching if (event.originalEvent.touches.length === 2) { //track the touches, I'm setting each touch as an array inside the tracks array //each touch array contains an X and Y coordinate tracks.push([ [event.originalEvent.touches[0].pageX, event.originalEvent.touches[0].pageY], [event.originalEvent.touches[1].pageX, event.originalEvent.touches[1].pageY] ]); } }).on("touchstart", function () { //start-over tracks = []; }).on("touchend", function () { //now you can decide the scale that the user chose //take the track points that are the closest and determine the difference between them and the points that are the farthest away from each other }); 

Pero, si usted quiere utilizar algo pre-hecho, entonces sugiero el chequeo Touchy: https://github.com/HotStudio/touchy

  • Android Bottom White Stripe al rellenar contenido Webview
  • ¿Qué es jQuery Mobile ?. ¿Es capaz de crear juegos para Android?
  • ScrollTop no funciona en móviles Android
  • Swipeleft / swiperight activado durante el desplazamiento vertical en jQuery móvil
  • Phonegap, conexión al servidor sin éxito
  • Cómo agregar a 'Añadir a pantalla de inicio' emergente para Android móvil
  • jquery mobile events en android contra iphone
  • ¿Por qué mi aplicación jQuery Mobile no se muestra correctamente en el navegador Android 4.0.3?
  • Elija una imagen de la cámara o de la galería mediante un mensaje telefónico
  • ¿Cómo conectarse al servidor en la aplicación móvil?
  • JQuery Mobile no funciona en WebView al cargar desde activos locales
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.