Cómo configurar la escala inicial para que mi sitio web móvil quepa en la pantalla
Me pregunto cómo configurar la 'escala inicial' para que en varios dispositivos el ancho del sitio se ajuste al ancho de la pantalla cuando lo carga por primera vez.
Mi página web
Funciona bien en los navegadores normales, pero tuve un comportamiento extraño con la inflación de texto + iframe medio en blanco en los navegadores de dispositivos móviles. La metaetiqueta de la ventana gráfica me está ayudando. Esto está funcionando bien ahora.
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.3, maximum-scale=1.0, minimum-scale=0.3" />
<meta name="apple-mobile-web-app-capable" content="yes" />
En este momento, si la escala inicial es grande y el sitio comienza a alejarse, la parte del iframe dentro del sitio que está fuera de la pantalla nunca se dibuja cuando se aleja. Si lo configura con una escala inicial pequeña para que comience a alejarse, puede acercar y todo funciona bien.
<meta name="apple-mobile-web-app-capable" content="yes" />
preguntado el 27 de noviembre de 13 a las 18:11
Guye Incognito
1 Respuestas
Lo que solucionó mis problemas fue en realidad la eliminación de todas esas metaetiquetas arriba y agregando esta línea a mi CSS:
html * {max-height:1000000px;}
Esto corrige la inflación/aumento de la fuente que hacía que mi sitio web no funcionara en dispositivos móviles en primer lugar.
Sin ninguna de esas metaetiquetas de ventana gráfica, todos los navegadores que probé* se acercarán automáticamente al ancho de la página.
*predeterminado, Chrome y Firefox en Android.
Respondido 30 ago 22, 17:08
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html css mobile viewport or haz tu propia pregunta.