¿Por qué los navegadores móviles cargan mi página completamente ampliada?

Question

Actualmente estoy trabajando en un sitio para un cliente (que todavía está en proceso) y tratando de solucionar algunos de los problemas de movilidad en el sitio.

El principal problema que tengo es que los navegadores móviles (android + iphone) cargan el sitio completamente ampliado en la parte superior izquierda del sitio. Me gustaría que se alejara para ajustarse a todo el ancho del sitio en la ventana gráfica, sin importar el ancho de la ventana gráfica.

El sitio se puede ver aquí: http://www.graceprep.com

¿Hay una solución fácil para esto? Tengo experiencia con HTML/CSS pero soy un poco novato cuando se trata de navegadores móviles.

Aquí hay algo de HTML en mi archivo header.php que podría ser relevante. Traté de cambiar la propiedad de ancho en vano. La propiedad de escala inicial es efectiva, pero demasiado amplia. Me gustaría que el sitio se aleje completamente para todos los navegadores móviles, sin importar la orientación o el tamaño de la pantalla.

¿Hay alguna manera de hacerlo?

Answer 1

¿Por qué tiene esa metaetiqueta en absoluto? Si lo quita por completo, el dispositivo decidirá el nivel de zoom automáticamente.

Answer 2

estoy casi seguro de que

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

debería resolver esta cuestión. Puede establecer "ancho" en el valor que desee, pero al configurarlo se ajustará al valor de ancho de píxel de cualquier dispositivo. "escala inicial" controla el nivel de zoom en ese ancho especificado.

Answer 3

Parece que la mayoría de los navegadores móviles tienden a comunicar un ancho de ventana predeterminado que es considerablemente más ancho que el ancho del móvil. Por ejemplo, iOS Safari supone que una página web tiene 980 píxeles de ancho y se aleja para ajustarse a todo el lote dentro del iPhone disponible 320 píxeles (https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972). Los navegadores Android tienden a adaptarse para un ancho entre 800 y 1024 píxeles CSS().

El ancho esperado parece comunicarse de alguna manera antes de que se implemente la metaetiqueta, por lo que en algunas situaciones el ancho del ancho del dispositivo parece tratarse como acercamiento. A menos que el CSS en su página use consultas de medios para adaptarse al ancho real del dispositivo, es mejor, en mi opinión, evitar perder la parte del valor 'ancho = ancho del dispositivo' y simplemente establecer las demás restricciones que está buscando.