html - inicial - Adición de una imagen div con zoom para pellizcar a una ventana gráfica no escalable en dispositivos móviles

posicionar div responsive

Question

Considere la siguiente etiqueta meta de viewport:

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

El contenido de la página no es escalable y responde a dispositivos móviles. A veces, necesito superponer una imagen grande encima de ella, y permitir que el usuario haga zoom en esa imagen.

#overlay_div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #dddddd;
    z-index: 550000;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

<div id="overlay_div">
    <img src="largeimage.jpg" width="100%">
</div>

Actualmente, soy consciente de dos posibles opciones:

1. Cambie programáticamente el punto de vista de la ventana gráfica para permitir al usuario escalar (posibles implicaciones en varios navegadores, también hace que el contenido que se encuentra debajo no sea deseable)
2. Utilice hammer.js para controlar manualmente el evento de pellizco y escalar la div / imagen en consecuencia (parece que las posibles implicaciones de compatibilidad son muy complejas).

¿Alguien sabe la forma correcta de hacerlo, especialmente para la compatibilidad entre navegadores? Espero que pueda haber una solución CSS simple.

Gracias

Answer 1

En general, me gustaría ir con una versión con zoom como se recomienda @Paulie_D; así que usa esto en todas tus páginas:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Aquí está la recomendación de Google .

Si realmente no tiene otra opción, le recomendaría que abra la imagen en la misma pestaña / ventana del navegador con la etiqueta meta muestra arriba y un enlace para la navegación. Así que el zoom nativo está disponible.

Este es un ejemplo para una implementación de este tipo (necesita un agente de usuario móvil): https://m.notebooksbilliger.de/notebooks/hp+compaq+15+h024sg

Answer 2

No estoy seguro de que sea su caso, pero por lo general prefiero hacer que la imagen sea un enlace (a) a la imagen original. Los navegadores móviles pueden manejar esta situación abriendo la imagen en modo de full screen completa. Luego, el usuario puede hacer lo que quiera con la imagen o puede volver a la página principal.