Modificar ubicación div en Zoom Mobile Safari

Question

Me está costando mucho preservar la ubicación de un div en relación con toda la pantalla cuando un usuario amplía. Básicamente, lo que intento hacer es reubicar un div en la ubicación calculada correctamente haciendo que parezca como si nunca se moviera aunque el usuario haya ampliado. Esto se está volviendo cada vez más complicado ya que, básicamente, quiero deshacer cualquier cambio visual que haya realizado el evento de acercamiento.

Por ejemplo, si la parte superior del div está actualmente en el centro de la pantalla en el nivel de zoom 1, (por ejemplo, escala de 1,00), cuando el usuario va al nivel de zoom 2, de 1.235), me gustaría volver a colocar la parte superior del div en el centro de la pantalla.

Actualmente, estoy vinculando el contenedor principal del div a una función que capta eventos de gestos.

ver enlace para fuente.

Cualquier orientación sobre este asunto sería apreciada. Gracias.

Actualización: Aquí hay un enlace a una aplicación de muestra. Puede encontrar todos mis controladores actuales y funcionalidad. Mi principal preocupación es restablecer el elemento 'palmGuard' en la misma ubicación en relación con la pantalla, después de un zoom. Hazme saber si tienes alguna pregunta.

Enlace: http://restingrobot.com/test/testScale.html

Este ejemplo sólo funciona en Safari Mobile

Answer 1

Ok creo que esto hace lo que quiere.

En lugar de usar un factor de zoom, necesita calcular la posición del div proporcionalmente a la pantalla de iOS. Tendrá que hacer un seguimiento de esto en todo momento. Cada vez que se mueve el div (no zoom) y al comienzo que necesita para obtener este valor:

//When div moved and start 
var height = window.innerHeight; //Adjust if needed 
screenPos = (currentDivTop - window.pageYOffset)/height; 

Luego, cuando el zoom sucede es necesario configurar la parte superior del div en gestureEnd hasta el punto superior de la página en pantalla (es decir, window.pageYOffset) más el número actual de píxeles en la pantalla (window.innerHeight) veces por la posición relativa en la pantalla de iOS que calculamos anteriormente (screenPos). Esto le da una nueva posición en la pantalla requerida (no la diferencia de la última vez).

//GestureEnd of zoom 
var height = window.innerHeight; //Adjust if needed 
var newDivTop = window.pageYOffset + (screenPos*height); 

Recuerde que deberá realizar un seguimiento del valor de esta proporción.

También creo que su lógica para "bandas" de zoom es demasiado simple, es decir, si eso es para manejar cuando el zoom rebota dentro de su rango. No creo que tenga en cuenta los diferentes tamaños de pantalla de iOS.

Además de la "banda" que afecta a la altura interior, también parece afectar el valor de posYOffset, lo que realmente tiene sentido. Esto hará que el div se coloque más abajo en la página. Una posible forma de evitar esto sería detectar cuando el acercamiento ha ido demasiado lejos (bandas al referirse a él) y usar una función de sondeo para detectar cuando la altura interior ha bajado a su mínimo, luego obtener el PosYOffset. Si existe un evento después del bandeo, la votación obviamente no será requerida.

Usted puede ser capaz de calcular la parte superior de la pantalla correcta (posYOffset) a partir del valor de bandas innerHeight, pero creo que puede depender de en qué parte del zoom con los dedos son lugar cuando el zoom.

Del mismo modo el valor de posYOffset y innerHeight parece cambiar después caso gestureEnd, por lo que incluso sin bandas que ocurre se necesita algún mecanismo para recoger el valor establecido de pageYOffset y innerHeight. Se puede comprobar este efecto añadiendo lo siguiente a gestureEnd:

//In gestureEnd 
alert ('gestureEnd pageY:'+window.pageYOffset+' height:'+height); 
setTimeout(function() { 
       alert ('later pageY:'+window.pageYOffset+' height:'+window.innerHeight); 
         }, 
      2000); 

Answer 2

Bueno Voy a ser honesto y decirle que todavía no he trabajado en los teléfonos apps/webstes. Por lo tanto, puede que no tenga razón en toda la sintaxis si difieren de los jquery tradicionales utilizados para los sitios web. Pero puedes probar el siguiente algoritmo (que básicamente posiciona el div en el centro de la página desde arriba). He usado el jquery tradicional porque estoy familiarizado con él.

/* ---- Excute the below lines on $(window).resize(function(){}); or a function that is triggered on zoom [which ever is correct] ---- */ 

var modalH = parseInt($('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('height')); 
var windowH = $(window).height(); 
var modalPosY = (windowH - modalH)/2; 
$('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('Top', modalPosY); 

y, por supuesto, la propiedad CSS de div/element tiene que ser absoluta [si no está ya configurada]. Y lo mismo se puede hacer para centrar a lo largo del eje X (en sustitución de altura con un ancho)

O

Usted podría utilizar los valores porcentuales de la posición de la div/elemento (que supongo que funciona mejor) . El siguiente artículo lo ayudará con eso: http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128. (Consulte el caso de prueba)