Un mio amico mi ha recentemente contattato per chiedere aiuto con un sito WordPress che aveva creato utilizzando il tema X. Il suo cliente lo aveva chiamato quella mattina dopo aver notato che il suo sito web non veniva visualizzato correttamente sul suo iPhone. Nick ha verificato di persona e, come previsto, il bellissimo design reattivo che ha progettato non funzionava più.
È stato ulteriormente disorientato dal fatto che quando ha ridimensionato la finestra del browser sul desktop, il sito era reattivo, ma sul suo iPhone veniva visualizzata solo la versione desktop. Perché un sito dovrebbe essere reattivo su un computer desktop e non reattivo su un dispositivo mobile?
Perché il responsive design non funziona
Il responsive design smette di funzionare quando manca una riga di codice dall'intestazione di un file HTML. Se manca questa singola riga di codice, il tuo iPhone, Android e altri dispositivi mobili presumeranno che il sito web che stai visualizzando sia un sito desktop a grandezza naturale e modificheranno le dimensioni del viewportper coprire l'intero schermo.
Cosa intendi per finestra e dimensione della finestra?
Su tutti i dispositivi, la dimensione del viewport si riferisce alla dimensione dell'area di una pagina web attualmente visibile all'utente. Immagina di avere in mano un iPhone 5 con una larghezza di 320 pixel. Se non diversamente specificato, gli iPhone presuppongono che ogni sito web che visiti sia un sito desktop con una larghezza di 980 px.
Ora, utilizzando il tuo iPhone 5 immaginario, visiti un sito Web progettato per desktop largo 800 px. Non ha un layout reattivo, quindi il tuo iPhone visualizza la versione desktop a tutta larghezza.
No non lo è. Con le dimensioni del viewport, può essere coinvolto il ridimensionamento. L'iPhone deve eseguire lo zoom indietro per visualizzare la versione a larghezza intera della pagina web. Ricorda che il viewport si riferisce all'area di una pagina che è attualmente visibile all'utente. L'utente di iPhone vede attualmente solo 320 pixel della pagina o vede la versione a larghezza intera?
Esatto: sul display viene visualizzata la pagina Web a larghezza intera perché l'iPhone ha assunto il suo comportamento predefinito: è stato ridotto in modo che l'utente possa visualizzare una pagina Web fino a una larghezza di 980 pixel. Pertanto, il viewport dell'iPhone è 980px.
Quando ingrandisci o rimpicciolisci, le dimensioni del viewport cambiano. Abbiamo detto prima che il nostro sito web immaginario ha una larghezza di 800px, quindi se dovessi ingrandire il tuo iPhone in modo che i bordi del sito web tocchino i bordi del display del tuo iPhone, il viewport sarebbe 800px. L'iPhone può avere un viewport di 320px su un sito desktop, ma se lo facesse, ne vedresti solo una piccola parte.
Il mio sito Web reattivo non funziona. Come lo aggiusto?
La risposta è una singola riga di codice HTML che, una volta inserita nell'intestazione di una pagina Web, indica al dispositivo di impostare la finestra sulla propria larghezza (320px nel caso di un iPhone 5) e di non ridimensionarla (o ingrandisci) la pagina.
Per una discussione più tecnica su tutte le opzioni relative a questo meta tag, dai un'occhiata a questo articolo su tutsplus.com.
Come correggere il tema WordPress X quando non risponde
Tornando al mio amico di prima: questa riga di codice è scomparsa quando ha aggiornato il tema X. Quando correggi il tuo, tieni presente che il tema X non utilizza un solo file di intestazione: utilizza file di intestazione diversi per ogni stack, quindi dovrai modificare il tuo.
Poiché Nick usa lo stack Ethos del tema X, ha dovuto aggiungere la riga di codice che ho menzionato prima al file di intestazione che si trovava in x /frameworks/views/ethos/wp-header.php. Se utilizzi uno stack diverso, sostituisci il nome del tuo stack (Integrity, Renew, ecc.) con "ethos" per trovare il file di intestazione corretto. Inserisci quella riga e voilà! Sei a posto.
Quindi questo risolve anche le mie CSS Media Queries?
Quando inserisci quella riga nell'intestazione del tuo file HTML, le tue @media query reattive ricominceranno improvvisamente a funzionare e la versione mobile del tuo sito web riprenderà vita. Grazie per aver letto e spero che ti sia d'aiuto!
Ricordati di Payette Forward, David P.
