Un amigo mío me contactó recientemente para pedirme ayuda con un sitio de WordPress que había construido 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 aún más desconcertado por el hecho de que cuando cambió el tamaño de la ventana de su navegador en su escritorio, el sitio estaba sensible, pero en su iPhone, solo se mostraba la versión de escritorio. ¿Por qué un sitio sería sensible 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 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án el tamaño del ventana gráfica para abarcar toda la pantalla.
¿Qué quiere decir con viewport y tamaño de viewport?
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 asumen que cada sitio web que visita es un sitio de escritorio con un ancho de 980px.
Ahora, usando tu iPhone 5 imaginario,visita un sitio web diseñado para escritorio que tiene un ancho de 800 píxeles. No tiene un diseño receptivo, por lo que su iPhone muestra la versión de escritorio de ancho completo.
¿Por qué no suena mi iphone 6?
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 la ventana gráfica se refiere al área de una página que actualmente es visible para el usuario. ¿El usuario de iPhone actualmente ve solo 320 píxeles de la página o está viendo la versión de ancho completo?
Así es: ven la página web de ancho completo en su pantalla porque el iPhone ha asumido su comportamiento predeterminado: se ha alejado 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 aleja, el tamaño de la ventana gráfica cambia. Antes dijimos que nuestro sitio web imaginario tiene un ancho de 800 px, por lo que si hicieras zoom en tu iPhone de modo que los bordes del sitio web tocaran los bordes de la pantalla de tu iPhone, la ventana gráfica sería de 800 px. El iphone lata tiene 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.
cómo descargar podcasts a iphone
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 establezca la ventana gráfica en su propio ancho (320px en el caso de un iPhone 5) y no escale (o amplíe) la página.
|_+_|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, usa diferentes archivos de encabezado para cada pila, por lo que tendrá que editar el suyo.
¿Por qué no funciona el wifi en mi iphone?
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 ¡voilá! Eres bueno para ir.
Entonces, ¿esto también corrige mis consultas de medios CSS?
Cuando inserta esa línea en el encabezado de su archivo HTML, sus consultas @media de respuesta de repente 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!
Recuerde Payette Forward,
David P.