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

Actualmente estoy trabajando en un sitio para un cliente (todavía en proceso) y estoy tratando de solucionar algunos de los problemas móviles 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 ampliara para ajustar el ancho completo 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 alguna manera sencilla de reparar 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. Intenté cambiar la propiedad de ancho sin éxito. La propiedad de escala inicial es efectiva, pero demasiado amplia. Me gustaría que el sitio se ampliara completamente para todos los navegadores móviles, sin importar la orientación o el tamaño de la pantalla.

¿Hay alguna forma de hacer esto?

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

Estoy casi seguro de que

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

Debe resolver ese problema. Puede establecer "width" en el valor que desee, pero al ajustarlo a device-width se ajustará al valor del ancho de píxel de cualquier dispositivo. "Inicial-escala" controla el nivel de zoom en ese ancho especificado.

Parece que la mayoría de los navegadores móviles tienden a comunicar un ancho de ventana de vista predeterminada que es considerablemente más ancho que el ancho del móvil. Por ejemplo iOS Safari asume que una página web es de 980px de ancho, y se pone en zooms con el fin de encajar todo el lote en el iPhone disponible 4 320px ( https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the- Viewport-meta-tag – webdesign-5972 ). Los navegadores de Android tienden a adaptarse para un ancho entre 800 a 1024 píxeles CSS ( https://developers.google.com/speed/docs/insights/ConfigureViewport ).

El ancho esperado parece ser comunicado de alguna manera antes de que se implemente la metaetiqueta, por lo que en algunas situaciones establecer el ancho al ancho del dispositivo parece ser tratado como acercamiento. A menos que el css en su página utilice consultas de medios para adaptarse a El ancho real del dispositivo, es mejor en mi opinión para evitar perder la parte 'width = device-width' del valor, y simplemente establecer las otras restricciones que está buscando.