Un amic meu es va posar en contacte recentment amb mi per demanar-me ajuda amb un lloc de WordPress que havia construït amb el tema X. El seu client l’havia trucat aquell matí després d’haver notat que el seu lloc web no es mostrava correctament al seu iPhone. Nick ho va comprovar ell mateix i, amb tota seguretat, el bonic disseny sensible que va dissenyar ja no funcionava.
El fet que el lloc el canviés de mida de la finestra del navegador a l'escriptori, el va desconcertar era sensible, però al seu iPhone només es mostrava la versió d'escriptori. Per què seria un lloc? responsiu en un ordinador de sobretaula i no respon en un dispositiu mòbil?
Per què el disseny sensible no funciona
El disseny sensible deixa de funcionar quan falta una línia de codi a la capçalera d’un fitxer HTML. Si falta aquesta única línia de codi, el vostre iPhone, Android i altres dispositius mòbils assumiran que el lloc web que esteu visualitzant és un lloc d’escriptori de mida completa i ajustarà la mida del finestra gràfica per incloure tota la pantalla.
Què voleu dir amb la finestra i la mida de la finestra?
En tots els dispositius, la mida de la finestra de visualització fa referència a la mida de l'àrea d'una pàgina web que actualment és visible per l'usuari. Imagineu que teniu un iPhone 5 amb una amplada de 320 píxels. Tret que s'indiqui explícitament el contrari, els iPhones assumeixen que cada lloc web que visiteu és un lloc d'escriptori amb una amplada de 980 px.
Ara, amb el vostre imaginari iPhone 5,visiteu un lloc web dissenyat per a ordinadors de 800 px d’amplada. No té un disseny responsiu, de manera que el vostre iPhone mostra la versió d'escriptori d'amplada completa.
com evitar que el bluetooth s'activi automàticament
Però un iPhone 5 només té una amplada de 320 píxels. No és sempre la mida de la finestra gràfica?
No, no ho és. Amb la mida de la finestra gràfica, es pot implicar l’escala . L'iPhone s'ha de reduir 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 de l'iPhone només veu 320 píxels de la pàgina o veu la versió d'amplada completa?
És cert: veuen la pàgina web d’amplada completa a la pantalla perquè l’iPhone ha assumit que té un comportament predeterminat: s’ha reduït de manera que l’usuari pugui veure una pàgina web de fins a 980 píxels d’amplada. Per tant, la finestra gràfica de l’iPhone és de 980 px.
A mesura que amplieu o reduïu, la mida de la finestra gràfica canvia. Abans dèiem que el nostre lloc web imaginari té una amplada de 800 px, de manera que si voleu ampliar l’iPhone de manera que les vores del lloc web toquin les vores de la pantalla de l’iPhone, la finestra gràfica seria de 800 px. L'iPhone llauna teniu una finestra gràfica de 320 píxels en un lloc d'escriptori, però si ho fes, només en veureu una petita part.
l'iPhone 6 no es restaurarà ni s'actualitzarà
El meu lloc web sensible està trencat. Com ho puc solucionar?
La resposta és una sola línia d’HTML que, quan s’insereix a la capçalera d’una pàgina web, indica al dispositiu que estableixi la finestra de visualització a la seva amplada pròpia (320 px en el cas d’un iPhone 5) i que no redimini (ni amplieu) la pàgina.
Per obtenir una discussió més tècnica de totes les opcions relacionades amb aquesta metaetiqueta, consulteu aquest article a tutsplus.com .
Com es corregeix 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 corregiu el vostre, tingueu en compte que el tema X no utilitza només un fitxer de capçalera: utilitza fitxers de capçalera diferents per a cada pila, de manera que haureu d’editar el vostre.
per què les meves aplicacions continuen bloquejant-se al meu iPhone?
Com 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 (Integrity, Renew, etc.) per 'ethos' per trobar el fitxer de capçalera correcte. Inseriu aquesta línia i voilà! Estàs bé per anar-hi.
Per tant, això soluciona les meves consultes de suports CSS, també?
Quan inseriu aquesta línia a la capçalera del fitxer HTML, les vostres consultes responsives @media de sobte tornaran a funcionar i la versió mòbil del vostre lloc web tornarà a cobrar vida. Gràcies per llegir i espero que us ajudi!
Recordeu enviar Payette Endavant,
David P.