Estoy usando JS y CSS para colocar imágenes dentro de la ventana gráfica (para escalarlas y traducirlas correctamente para que la llenen).

En general, esto funciona bien y también puede manejar el zoom del navegador con gracia.

Estoy usando window.pageXOffset y window.pageYOffset en combinación con document.documentElement.clientWidth y document.documentElement.clientWidth para determinar el punto central actual en el documento (en relación con la ventana gráfica) para saber dónde traducir la imagen.

Dado que este es un sitio enfocado en imágenes, también quiero prestar especial atención a cómo manejo las cosas cuando los visitantes se acercan usando pellizcar para acercar (o métodos similares) que no son lo mismo que usar el zoom del navegador.

Chrome parece ignorar por completo pellizcar para hacer zoom. Tanto el desplazamiento de desplazamiento como el ancho y la altura del cliente en realidad no cambian en absoluto cuando pellizcas para acercar. Como tal, el comportamiento está bien, aunque un poco torcido (al menos ninguno de mis cálculos se descarta).

Sin embargo, Safari es una bestia diferente: window.pageXOffset y window.pageYOffset reaccionan al pellizcar para hacer zoom (por ejemplo, pageXOffset ahora podría ser 150 en lugar de 0, ya que ahora es la distancia de desplazamiento real hacia el borde izquierdo).

Sin embargo, en Safari, tanto document.documentElement.clientWidth como document.documentElement.clientWidth permanecen completamente sin cambios, lo que significa que si ahora calculo el centro del documento en relación con la ventana gráfica, los números están apagados y tanto la transformación como la escala no lo hacen. producir resultados correctos.

Aquí hay un cálculo de ejemplo del centro del documento en relación con la ventana gráfica que ya no funciona cuando se pellizca para acercar en Safari:

 var scrollLeft = window.pageXOffset; var scrollTop = window.pageYOffset; var viewportWidth = document.documentElement.clientWidth; var viewportHeight = document.documentElement.clientHeight; var viewportCenterX = scrollLeft + viewportWidth / 2; var viewportCenterY = scrollTop + viewportHeight / 2;

¿Hay alguna manera de obtener una detección consistente de pellizcar para hacer zoom y también valores consistentes para colocar elementos en la pantalla, incluso si alguien hizo zoom? No pude encontrar ninguna propiedad adecuada.

(Mi objetivo general es admitir solo versiones relativamente actuales de todos los navegadores. No necesito una solución que funcione absolutamente en todas partes).