Môj priateľ ma nedávno kontaktoval so žiadosťou o pomoc so stránkou WordPress, ktorú vytvoril pomocou témy X. Jeho klient mu zavolal v to ráno, keď si všimol, že jeho webová stránka sa na jeho iPhone nezobrazuje správne. Nick si to sám overil a naozaj, krásny responzívny dizajn, ktorý navrhol, už nefungoval.
Ešte viac ho zmiatla skutočnosť, že keď zmenil veľkosť okna prehliadača na pracovnej ploche, stránka bola responzívna, no na jeho iPhone sa zobrazovala iba verzia pre počítač. Prečo by mal byť web responzívny na stolnom počítači a neresponzívny na mobilnom zariadení?
Prečo responzívny dizajn nefunguje
Responzívny dizajn prestane fungovať, keď v hlavičke súboru HTML chýba jeden riadok kódu. Ak tento jediný riadok kódu chýba, váš iPhone, Android a ďalšie mobilné zariadenia budú predpokladať, že webová lokalita, ktorú si prezeráte, je v plnej veľkosti, a upraví veľkosť viewportna obsiahnutie celej obrazovky.
Čo máte na mysli pod pojmom zobrazovacia oblasť a veľkosť oblasti?
Na všetkých zariadeniach sa veľkosť zobrazovanej oblasti vzťahuje na veľkosť oblasti webovej stránky, ktorá je aktuálne viditeľná pre používateľa. Predstavte si, že držíte iPhone 5 so šírkou 320 pixelov. Ak nie je výslovne uvedené inak, telefóny iPhone predpokladajú, že každá webová stránka, ktorú navštívite, je stránka pre počítače so šírkou 980 pixelov.
Teraz pomocou svojho imaginárneho iPhone 5 navštívite webovú stránku určenú pre stolné počítače, ktorá je široká 800 pixelov. Nemá responzívne rozloženie, takže váš iPhone zobrazuje počítačovú verziu v plnej šírke.
Nie, nie je. S veľkosťou výrezu môže byť zahrnuté škálovanie. Ak chcete vidieť verziu webovej stránky v plnej šírke, iPhone sa musí oddialiť. Pamätajte, že zobrazená oblasť sa vzťahuje na oblasť stránky, ktorá je momentálne viditeľná pre používateľa. Vidí používateľ iPhone momentálne iba 320 pixelov stránky alebo vidí verziu v plnej šírke?
Správne: Na displeji sa im zobrazuje webová stránka v plnej šírke, pretože iPhone predpokladá, že je to predvolené správanie: Je oddialená, takže používateľ môže zobraziť webovú stránku až do šírky 980 pixelov. Preto je zobrazovacia oblasť iPhone 980 pixelov.
Pri približovaní alebo odďaľovaní sa veľkosť výrezu mení. Už sme povedali, že naša imaginárna webová stránka má šírku 800 pixelov, takže ak by ste svoj iPhone priblížili tak, aby sa okraje webovej stránky dotýkali okrajov displeja vášho iPhone, zobrazovaná oblasť by bola 800 pixelov. iPhone môže mať zobrazenú oblasť 320 pixelov na stránke pre stolné počítače, ale ak áno, videli by ste len malú časť.
Môj responzívny web je nefunkčný. Ako to opravím?
Odpoveď predstavuje jeden riadok HTML, ktorý po vložení do hlavičky webovej stránky povie zariadeniu, aby nastavilo zobrazovaciu oblasť na vlastnú šírku (320 pixelov v prípade iPhonu 5) a nie na mierku. (alebo priblížiť) stránku.
Technickejšiu diskusiu o všetkých možnostiach súvisiacich s touto metaznačkou nájdete v tomto článku na tutsplus.com.
Ako opraviť tému WordPress X, keď nereaguje
Späť k môjmu priateľovi z minulosti: Tento jeden riadok kódu zmizol, keď aktualizoval tému X. Pri oprave toho vášho majte na pamäti, že téma X nepoužíva iba jeden hlavičkový súbor – používa iné hlavičkové súbory pre každý zásobník, takže budete musieť upraviť ten svoj.
Keďže Nick používa zásobník Ethos témy X, musel pridať riadok kódu, ktorý som spomenul predtým, do súboru hlavičky, ktorý sa nachádzal v x /frameworks/views/ethos/wp-header.php. Ak používate iný zásobník, nahraďte názov svojho zásobníka (Integrity, Renew atď.) pre „ethos“, aby ste našli správny hlavičkový súbor. Vložte ten jeden riadok a voila! Môžete ísť.
Takže toto opravuje aj moje mediálne dopyty CSS?
Keď vložíte tento riadok do hlavičky svojho súboru HTML, vaše responzívne @media dopyty začnú zrazu opäť fungovať a mobilná verzia vašej webovej stránky sa vráti k životu. Ďakujem za prečítanie a dúfam, že to pomôže!
Nezabudnite na preposielanie výplaty, David P.
