Un amigo mío me contactó recientemente para pedirme ayuda con un sitio de WordPress que había creado usando el tema X. Su cliente lo llamó esa mañana después de notar que su sitio web no se mostraba correctamente en su iPhone. Nick lo comprobó por sí mismo y, efectivamente, el hermoso diseño receptivo que diseñó ya no funcionaba.
Estaba aún más desconcertado por el hecho de que cuando cambió el tamaño de la ventana del navegador en su escritorio, el sitio respondía, pero en su iPhone, solo se mostraba la versión de escritorio. ¿Por qué un sitio responde en una computadora de escritorio y no responde en un dispositivo móvil?
Por qué el diseño receptivo no funciona
El diseño receptivo deja de funcionar cuando f alta una línea de código en el encabezado de un archivo HTML. Si f alta 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 viewportpara 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 está actualmente 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 iPhone asumen 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 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.
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 la ventana gráfica 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 su comportamiento predeterminado: se aleja para que el usuario pueda ver una página web con un ancho de hasta 980 píxeles. Por lo tanto, la ventana gráfica del iPhone es de 980 px.
A medida que se acerca o se aleja, el tamaño de la ventana gráfica cambia. Dijimos antes que nuestro sitio web imaginario tiene un ancho de 800 px, por lo que si hiciera zoom en su iPhone para que los bordes del sitio web tocaran los bordes de la pantalla de su iPhone, la ventana gráfica sería de 800 px. El iPhone puede tener una ventana gráfica de 320 px en un sitio de escritorio, pero si la tuviera, solo vería una pequeña parte de ella.
Mi sitio web adaptable no funciona. ¿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 establezca la ventana gráfica a su propio ancho (320 px en el caso de un iPhone 5) y no a escala (o ampliar) la página.
Para obtener una discusión más técnica de todas las opciones relacionadas con esta metaetiqueta, consulta este artículo en tutsplus.com.
Cómo reparar el tema de WordPress X cuando no responde
Volver a mi amigo de antes: esta línea de código desapareció cuando actualizó el tema X. Al arreglar el tuyo, ten 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ás que editar el tuyo.
Dado que Nick usa la pila Ethos del tema X, tuvo que agregar la línea de código que mencioné antes al archivo de encabezado que estaba ubicado en x /frameworks/views/ethos/wp-header.php Si usa una pila diferente, sustituya el nombre de su pila (Integridad, Renovar, etc.) por "ethos" para encontrar el archivo de encabezado correcto. Inserta esa línea y ¡listo! Eres bueno para ir.
¿Así que esto también soluciona mis consultas de medios CSS?
Cuando inserta esa línea en el encabezado de su archivo HTML, sus consultas receptivas de @media comenzarán a funcionar nuevamente y la versión móvil de su sitio web volverá a la vida. ¡Gracias por leer y espero que te ayude!
Recuerda a Payette Forward, David P.
