WordPress

Mi sitio web receptivo no funciona. La solución: Viewport.

Mi sitio web receptivo no funciona. La solución: Viewport.

Un amigo mío recientemente me contactó para pedir ayuda con un sitio de WordPress que había creado usando el tema X. Su cliente lo había llamado esa mañana después de que notó que su sitio web no se mostraba correctamente en su iPhone. Nick lo comprobó él mismo y, efectivamente, el hermoso diseño receptivo que diseñó ya no funcionaba.

Estaba desconcertado por el hecho de que cuando se cambia el tamaño de la ventana de su navegador en su escritorio, el sitio  era sensible, pero en su iPhone, se muestra sólo la versión de escritorio. ¿Por qué un sitio respondería en una computadora de escritorio y no respondería en un dispositivo móvil?

Por qué el diseño receptivo no funciona

El diseño receptivo deja de funcionar cuando falta una línea de código en el encabezado de un archivo HTML. Si falta esta única línea de código, su iPhone, Android y otros dispositivos móviles asumirán que el sitio web que está viendo es un sitio de escritorio de tamaño completo y ajustará el tamaño de la ventana gráfica para abarcar toda la pantalla.

¿Qué quiere decir con ventana gráfica y tamaño de ventana gráfica?

En todos los dispositivos, el tamaño de la ventana gráfica se refiere al tamaño del área de una página web que actualmente es visible para el usuario. Imagina que tienes un iPhone 5 con un ancho de 320 píxeles. A menos que se indique explícitamente lo contrario, los iPhones suponen que cada sitio web que visita es un sitio de escritorio con un ancho de 980 px.

Ahora, usando su iPhone 5 imaginario,  visita un sitio web diseñado para computadoras de escritorio que tiene 800px de ancho. No tiene un diseño receptivo, por lo que su iPhone muestra la versión de escritorio de ancho completo. 

Pero un iPhone 5 tiene solo 320 píxeles de ancho. ¿No es siempre el tamaño de la ventana gráfica?

No, no es. Con el tamaño de la ventana gráfica, la escala puede estar involucrada . El iPhone tiene que alejarse para ver la versión de ancho completo de la página web. Recuerde que viewport se refiere al área de una página que actualmente es visible para el usuario. ¿El usuario de iPhone está viendo actualmente solo 320 píxeles de la página, o está viendo la versión de ancho completo?

Así es: están viendo la página web de ancho completo en su pantalla porque el iPhone ha asumido que es su comportamiento predeterminado: está alejada para que el usuario pueda ver una página web de hasta 980 píxeles de ancho. Por lo tanto, la vista del iPhone es de 980 px.

A medida que se acerca o aleja, el tamaño de la vista cambia. Anteriormente dijimos que nuestro sitio web imaginario tiene un ancho de 800 píxeles, por lo que si tuviera que acercar su iPhone para que los bordes del sitio tocaran los bordes de la pantalla de su iPhone, la ventana sería de 800 píxeles. El iPhone  puede tener una vista de 320px en un sitio de escritorio, pero si lo tuviera, solo vería una pequeña parte de él.

Mi sitio web receptivo está roto. ¿Cómo lo soluciono?

La respuesta es una sola línea de HTML que, cuando se inserta en el encabezado de una página web, le dice al dispositivo que configure la ventana gráfica a su propio ancho (320px en el caso de un iPhone 5) y que no escale (o amplíe) la página.

1<meta name=»viewport» content=»width=device-width»>

Para una discusión más técnica de todas las opciones relacionadas con esta metaetiqueta, consulte este artículo en tutsplus.com .

Cómo arreglar el tema de WordPress X cuando no responde

Volviendo a mi amigo de antes: esta línea de código desapareció cuando actualizó el tema X. Cuando arregle el suyo, tenga en cuenta que el tema X no usa solo un archivo de encabezado, sino que usa diferentes archivos de encabezado para cada pila, por lo que tendrá que editar el suyo.

Dado que Nick usa el tema Ethos stack of X, tuvo que agregar una línea de código que mencioné antes al archivo de encabezado que se encuentra en x /frameworks/views/ethos/wp-header.php . Si utiliza una pila diferente, sustituya el nombre de su pila (Integridad, Renovación, etc.) por ‘ethos’ para encontrar el archivo de encabezado correcto. Inserte esa línea, y listo! Eres bueno para ir.

Entonces, ¿esto también soluciona mis consultas de medios CSS?

Cuando inserte esa línea en el encabezado de su archivo HTML, sus consultas @media receptivas comenzarán a funcionar de repente y la versión móvil de su sitio web volverá a la vida. Gracias por leer y espero que te sirva de ayuda.

Recuerde Payette Forward,
David P.

Deja un comentario