Moj prijatelj je pred kratkim stopil v stik z mano in me prosil za pomoč pri spletnem mestu WordPress, ki ga je ustvaril s temo X. Njegova stranka ga je poklicala tisto jutro, potem ko je opazil, da se njegovo spletno mesto na njegovem iPhonu ne prikazuje pravilno. Nick je to sam preveril in zagotovo čudovit odzivni dizajn, ki ga je oblikoval, ni več deloval.
Še dodatno ga je zmotilo dejstvo, da je bilo spletno mesto odzivno, ko je spremenil velikost okna brskalnika na namizju, na njegovem iPhonu pa je bila prikazana samo namizna različica. Zakaj bi bilo spletno mesto odzivno na namiznem računalniku in neodzivno na mobilni napravi?
Zakaj odzivni dizajn ne deluje
Odzivni dizajn preneha delovati, ko v glavi datoteke HTML manjka ena vrstica kode. Če ta ena sama vrstica kode manjka, bodo vaš iPhone, Android in druge mobilne naprave domnevale, da je spletno mesto, ki si ga ogledujete, namizno mesto v polni velikosti, in prilagodile velikost viewport , da zajame celoten zaslon.
Kaj mislite z besedama Viewport in velikost Viewport?
Na vseh napravah se velikost vidnega polja nanaša na velikost območja spletne strani, ki je trenutno vidna uporabniku. Predstavljajte si, da držite iPhone 5 s širino 320 slikovnih pik. Če ni izrecno navedeno drugače, iPhone predpostavlja, da je vsako spletno mesto, ki ga obiščete, namizno spletno mesto s širino 980 slikovnih pik.
Zdaj, ko uporabljate svoj namišljeni iPhone 5, obiščete spletno mesto, zasnovano za namizje, ki je široko 800 slikovnih pik. Nima odzivne postavitve, zato vaš iPhone prikazuje namizno različico polne širine.
Ne, ni. Pri velikosti vidnega polja je lahko vključeno skaliranje. IPhone mora pomanjšati, da vidi različico spletne strani v polni širini. Ne pozabite, da se vidno polje nanaša na območje strani, ki je trenutno vidno uporabniku. Ali uporabnik iPhone trenutno vidi samo 320 slikovnih pik strani ali vidi različico polne širine?
Tako je: na svojem zaslonu vidijo spletno stran v polni širini, ker je iPhone predvidel, da je to privzeto vedenje: pomanjšan je, tako da si lahko uporabnik ogleda spletno stran do širine 980 slikovnih pik. Zato je vidno polje iPhone-a 980 slikovnih pik.
Ko povečate ali pomanjšate, se velikost vidnega polja spremeni. Prej smo rekli, da ima naše namišljeno spletno mesto širino 800 slikovnih pik, tako da če bi svoj iPhone povečali tako, da bi se robovi spletnega mesta dotikali robov zaslona vašega iPhone-a, bi bilo vidno polje 800 slikovnih pik. IPhone ima lahko vidno polje 320 slikovnih pik na namiznem spletnem mestu, če pa bi bilo, bi videli le majhen del tega.
Moje odzivno spletno mesto ne deluje. Kako to popravim?
Odgovor je ena vrstica HTML, ki, ko je vstavljena v glavo spletne strani, pove napravi, naj nastavi vidno polje na lastno širino (320 slikovnih pik v primeru iPhona 5) in ne v merilu (ali povečajte) stran.
Za bolj tehnično razpravo o vseh možnostih, povezanih s to metaoznako, si oglejte ta članek na tutsplus.com.
Kako popraviti temo WordPress X, ko se ne odziva
Nazaj k prijatelju od prej: Ta ena vrstica kode je izginila, ko je posodobil temo X. Ko popravljate svojo, ne pozabite, da tema X ne uporablja samo ene datoteke z glavo – za vsak sklad uporablja različne datoteke z glavo, zato boste morali urediti svojo.
Ker Nick uporablja sklad Ethos teme X, je moral dodati vrstico kode, ki sem jo omenil prej, v datoteko glave, ki se nahaja v x /frameworks/views/ethos/wp-header.php. Če uporabljate drug sklad, nadomestite ime svojega sklada (Integrity, Renew itd.) z 'ethos', da poiščete pravilno datoteko glave. Vstavite to eno vrstico in voila! Pripravljeni ste.
Torej to popravlja tudi moje medijske poizvedbe CSS?
Ko to vrstico vstavite v glavo vaše datoteke HTML, bodo vaše odzivne poizvedbe @media nenadoma spet začele delovati in mobilna različica vašega spletnega mesta bo spet oživela. Hvala za branje in upam, da pomaga!
Remember to Payette Forward, David P.
