Nedavno me kontaktirao moj prijatelj i zatražio pomoć s WordPress stranicom koju je izradio koristeći X temu. Njegov klijent ga je nazvao tog jutra nakon što je primijetio da se njegova web stranica ne prikazuje ispravno na njegovom iPhoneu. Nick je to sam provjerio i naravno, prekrasan responzivni dizajn koji je dizajnirao više nije funkcionirao.
Dodatno ga je zbunila činjenica da kada je promijenio veličinu prozora preglednika na radnoj površini, stranica je responzivna, ali na njegovom iPhoneu prikazana je samo verzija za radnu površinu. Zašto bi stranica bila responzivna na stolnom računalu, a ne bi responzivna na mobilnom uređaju?
Zašto responzivni dizajn ne funkcionira
Responzivni dizajn prestaje raditi kada u zaglavlju HTML datoteke nedostaje jedna linija koda. Ako nedostaje ovaj jedan redak koda, vaš iPhone, Android i drugi mobilni uređaji pretpostavit će da je web-mjesto koje gledate desktop web-mjesto u punoj veličini i prilagoditi veličinu viewportda obuhvati cijeli zaslon.
Što mislite pod okvirom za prikaz i veličinom okvira za prikaz?
Na svim uređajima, veličina okvira za prikaz odnosi se na veličinu područja web stranice koje je trenutno vidljivo korisniku. Zamislite da držite iPhone 5 širine 320 piksela. Osim ako nije izričito navedeno drugačije, iPhone uređaji pretpostavljaju da je svaka web stranica koju posjetite desktop stranica širine 980px.
Sada, koristeći svoj imaginarni iPhone 5, posjećujete web stranicu dizajniranu za desktop koja je široka 800px. Nema responzivni izgled, tako da vaš iPhone prikazuje verziju za radnu površinu pune širine.
Ne, nije. S veličinom okvira za prikaz, skaliranje može biti uključeno. iPhone se mora smanjiti kako bi vidio verziju web stranice pune širine. Imajte na umu da se okvir za prikaz odnosi na područje stranice koje je trenutno vidljivo korisniku. Vidi li korisnik iPhonea trenutno samo 320 piksela stranice ili vidi verziju pune širine?
Tako je: oni vide web-stranicu pune širine na svom zaslonu jer je iPhone pretpostavio da je to zadano ponašanje: smanjen je kako bi korisnik mogao vidjeti web-stranicu do širine od 980 piksela. Stoga je okvir za prikaz iPhonea 980px.
Kako povećavate ili smanjujete, veličina okvira za prikaz se mijenja. Prije smo rekli da naša imaginarna web stranica ima širinu od 800px, pa ako biste zumirali svoj iPhone tako da rubovi web stranice dodiruju rubove zaslona vašeg iPhonea, prozor za prikaz bi bio 800px. iPhone može imati okvir za prikaz od 320 piksela na web-mjestu za radnu površinu, ali da ima, vidjeli biste samo mali dio toga.
Moja responzivna web stranica ne radi. Kako to popraviti?
Odgovor je jedan redak HTML-a koji kada se umetne u zaglavlje web-stranice govori uređaju da postavi okvir za prikaz na vlastitu širinu (320px u slučaju iPhonea 5), a ne na skaliranje (ili zumirajte) stranicu.
Za detaljniju raspravu o svim opcijama vezanim uz ovu meta oznaku, pogledajte ovaj članak na tutsplus.com.
Kako popraviti WordPress X temu kada ne reagira
Povratak mom prijatelju od prije: Ova jedna linija koda je nestala kada je ažurirao X temu. Kada popravljate svoju, imajte na umu da X tema ne koristi samo jednu datoteku zaglavlja – ona koristi različite datoteke zaglavlja za svaki niz, tako da ćete morati urediti svoju.
Budući da Nick koristi Ethos hrpu X teme, morao je dodati redak koda koji sam prije spomenuo u datoteku zaglavlja koja se nalazila u x /frameworks/views/ethos/wp-header.php. Ako koristite drugi stog, zamijenite naziv svog stoga (Integrity, Renew, itd.) za 'ethos' kako biste pronašli ispravnu datoteku zaglavlja. Umetnite taj jedan redak i voila! Spremni ste.
Dakle, ovo popravlja i moje CSS medijske upite?
Kada umetnete taj redak u zaglavlje svoje HTML datoteke, vaši responzivni @media upiti iznenada će opet početi raditi i mobilna verzija vaše web stranice će oživjeti. Hvala na čitanju i nadam se da pomaže!
Remember to Payette Forward, David P.
