posicionar para inicial imagenes etiqueta establecer elementos efecto div ajustar adaptable html css mobile touch

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 (2)

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


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


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.