Estoy creando un PWA simple y estoy tratando de hacer que se vea como una aplicación móvil nativa, aunque tengo varios problemas con el pellizco.
Agregué este código a mi layout.html (estoy usando Flask para el backend)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">Aunque realmente funciona como quiero, hay algunas imágenes que quiero que el usuario pueda ampliar, y sé que no se recomienda desactivar el zoom escalable para dispositivos móviles, pero realmente, esto es lo que quiero, sin zoom en el toda la página aparte de la etiqueta imgs que tengo. Me gustaría tener una solución css/js pura o, como máximo, algo que no necesite npm, incluso un cdn es bueno para mí.
Establezca la altura y/o el ancho de los elementos que NO SON imágenes en vh o vw.
https://www.w3schools.com/cssref/css_units.asp vh - altura de la ventana gráfica - representa una fracción de la altura de la pantalla. Cuando hace zoom, (por ejemplo) la fuente permanece del mismo tamaño
div { font-size: 2vh; }