Un amic meu es va contactar recentment amb mi per demanar ajuda amb un lloc de WordPress que havia creat amb el tema X. El seu client l'havia trucat aquell matí després de notar que el seu lloc web no es mostrava correctament al seu iPhone. Nick ho va comprovar ell mateix i, per descomptat, el bonic disseny responsiu que va dissenyar ja no funcionava.
Es va desconcertar encara més pel fet que quan va canviar la mida de la finestra del navegador al seu escriptori, el lloc responia, però al seu iPhone només es mostrava la versió d'escriptori. Per què un lloc hauria de respondre en un ordinador d'escriptori i no en un dispositiu mòbil?
Per què el disseny responsive no funciona
El disseny responsive deixa de funcionar quan f alta una línia de codi a la capçalera d'un fitxer HTML. Si f alta aquesta única línia de codi, el vostre iPhone, Android i altres dispositius mòbils assumiran que el lloc web que esteu veient és un lloc d'escriptori a mida completa i ajustaran la mida de la viewportper abastar tota la pantalla.
Què vols dir amb la mida de la finestra i la mida de la finestra?
A tots els dispositius, la mida de la finestra gràfica fa referència a la mida de l'àrea d'una pàgina web que actualment és visible per l'usuari. Imagina que tens un iPhone 5 amb una amplada de 320 píxels. A menys que explícitament s'indiqui el contrari, els iPhone assumeixen que cada lloc web que visiteu és un lloc d'escriptori amb una amplada de 980 píxels.
Ara, utilitzant el vostre iPhone 5 imaginari, visiteu un lloc web dissenyat per a ordinadors de 800 píxels d'amplada. No té un disseny responsiu, de manera que el vostre iPhone mostra la versió d'escriptori d'amplada completa.
No, no ho és. Amb la mida de la finestra gràfica, es pot implicar l'escala. L'iPhone ha d'allunyar-se per veure la versió d'amplada completa de la pàgina web. Recordeu que la finestra gràfica fa referència a l'àrea d'una pàgina que actualment és visible per l'usuari. Actualment l'usuari d'iPhone només veu 320 píxels de la pàgina o està veient la versió d'amplada completa?
Així és: estan veient la pàgina web d'amplada completa a la seva pantalla perquè l'iPhone ha assumit que és el seu comportament predeterminat: s'ha allunyat perquè l'usuari pugui veure una pàgina web amb una amplada de 980 píxels. Per tant, la finestra gràfica de l'iPhone és de 980 píxels.
A mesura que apropeu o allunyeu, la mida de la finestra gràfica canvia. Abans vam dir que el nostre lloc web imaginari té una amplada de 800 píxels, de manera que si amplieu el vostre iPhone de manera que les vores del lloc web toquessin les vores de la pantalla del vostre iPhone, la finestra gràfica seria de 800 píxels. L'iPhone pot tenir una finestra gràfica de 320 píxels en un lloc d'escriptori, però si ho fes, només en veuríeu una petita part.
El meu lloc web responsiu està trencat. Com ho soluciono?
La resposta és una única línia d'HTML que quan s'insereix a la capçalera d'una pàgina web diu al dispositiu que estableixi la finestra gràfica a la seva amplada (320 píxels en el cas d'un iPhone 5) i no escala. (o ampliar) la pàgina.
Per a una discussió més tècnica de totes les opcions relacionades amb aquesta metaetiqueta, consulteu aquest article a tutsplus.com.
Com arreglar el tema de WordPress X quan no respon
Tornar al meu amic d'abans: aquesta línia de codi va desaparèixer quan va actualitzar el tema X. Quan arregleu el vostre, tingueu en compte que el tema X no utilitza només un fitxer de capçalera, sinó que utilitza diferents fitxers de capçalera per a cada pila, de manera que haureu d'editar el vostre.
Atès que Nick utilitza la pila Ethos del tema X, va haver d'afegir una línia de codi que he esmentat abans al fitxer de capçalera que es trobava a x /frameworks/views/ethos/wp-header.php. Si utilitzeu una pila diferent, substituïu el nom de la vostra pila (Integritat, Renovació, etc.) per "ethos" per trobar el fitxer de capçalera correcte. Inseriu aquesta línia i voilà! Estàs a punt per anar-hi.
Això també soluciona les meves consultes de mitjans CSS?
Quan inseriu aquesta línia a la capçalera del vostre fitxer HTML, les vostres consultes @media responsives tornaran a funcionar de sobte i la versió mòbil del vostre lloc web tornarà a la vida. Gràcies per llegir i espero que us ajudi!
Remember to Payette Forward, David P.
