Il mio sito web reattivo non funziona. La correzione: Viewport.

My Responsive Website Isn T Working







Prova Il Nostro Strumento Per Eliminare I Problemi

cosa dice la Bibbia sugli arcobaleni?

Un mio amico mi ha contattato di recente 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 lo controllò di persona e, abbastanza sicuro, il bellissimo design reattivo che aveva progettato non funzionava più.





È stato ulteriormente sconcertato 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é dovrebbe essere un sito reattivo su un computer desktop e non risponde su un dispositivo mobile?



Perché il responsive design non funziona

Il responsive design smette di funzionare quando manca una riga di codice nell'intestazione di un file HTML. Se manca questa singola riga di codice, il tuo iPhone, Android e altri dispositivi mobili presumono che il sito web che stai visualizzando sia un sito desktop a grandezza naturale e regola le dimensioni del viewport per comprendere l'intero schermo.

Cosa intendi per viewport e dimensione viewport?

Su tutti i dispositivi, la dimensione del viewport si riferisce alla dimensione dell'area di una pagina web che è attualmente visibile all'utente. Immagina di tenere in mano un iPhone 5 con una larghezza di 320 pixel. Salvo diversa indicazione esplicita, gli iPhone presumono che ogni sito web che visiti sia un sito desktop con una larghezza di 980 px.

Ora, usando il tuo immaginario iPhone 5,visiti un sito web progettato per desktop largo 800 px. Non ha un layout reattivo, quindi il tuo iPhone mostra la versione desktop a larghezza intera.





il cellulare va in segreteria

Ma un iPhone 5 è largo solo 320 pixel. Non sono sempre le dimensioni del viewport?

No non lo è. Con le dimensioni del viewport, può essere coinvolto il ridimensionamento . L'iPhone deve rimpicciolire per vedere 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 iPhone vede attualmente solo 320 pixel della pagina o vede la versione a larghezza intera?

Esatto: vedono la pagina web a larghezza intera sul display perché l'iPhone ha assunto il comportamento predefinito: è ridotto in modo che l'utente possa visualizzare una pagina web fino a una larghezza di 980 pixel. Pertanto, la visualizzazione dell'iPhone è di 980 px.

Man mano che si ingrandisce o si rimpicciolisce, le dimensioni della vista cambiano. Abbiamo detto prima che il nostro sito Web immaginario ha una larghezza di 800 px, quindi se ingrandissi il tuo iPhone in modo che i bordi del sito web toccassero i bordi del display del tuo iPhone, la visualizzazione sarebbe 800 px. L'iPhone può avere una visualizzazione di 320 px su un sito desktop, ma se lo fosse, ne vedresti solo una piccola parte.

l'altoparlante della chiamata iphone non funziona

Il mio sito web reattivo è rotto. Come lo aggiusto?

La risposta è una singola riga di HTML che, se inserita nell'intestazione di una pagina web, dice al dispositivo di impostare la visualizzazione sulla sua larghezza (320 px nel caso di un iPhone 5) e di non ridimensionare (o ingrandire) la pagina.

Per una discussione più tecnica di tutte le opzioni relative a questo meta tag, dai un'occhiata questo articolo su tutsplus.com .

Come risolvere il tema WordPress X quando non è reattivo

Tornando al mio amico di prima: questa riga di codice è scomparsa quando ha aggiornato il tema X. Quando aggiusti 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.

il touch screen dell'iphone 7 non funziona correttamente

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 query multimediali CSS?

Quando inserisci quella riga nell'intestazione del tuo file HTML, le tue query reattive @media inizieranno improvvisamente a funzionare di nuovo e la versione mobile del tuo sito web tornerà in vita. Grazie per la lettura e spero che aiuti!

Ricordati di Payette Forward,
David P.