Jeden 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 web sa na jeho iPhone nezobrazuje správne. Nick to skontroloval sám a krásny responzívny dizajn, ktorý navrhol, už skutočne nefunguje.
Ďalej ho mystila skutočnosť, že keď zmenil veľkosť okna prehľadávača na svojej pracovnej ploche, stránka bol responzívny, ale na jeho iPhone sa zobrazila iba desktopová verzia. Prečo by stránka bola responzívny na stolnom počítači a nereaguje na mobilnom zariadení?
Prečo nefunguje responzívny dizajn
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 web, ktorý si prezeráte, je plnohodnotný web pre počítače a upraví veľkosť priezor pokryje celú obrazovku.
Čo máte na mysli výrez a veľkosť výrezu?
Veľkosť výrezu na všetkých zariadeniach zodpovedá veľkosti 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. Pokiaľ nie je výslovne uvedené inak, iPhony predpokladajú, že každá navštívená webová stránka je web pre stolné počítače so šírkou 980 pixelov.
Teraz pomocou svojho imaginárneho iPhonu 5navštívite web určený pre stolný počítač, ktorý je široký 800 pixelov. Nemá responzívne rozloženie, takže váš iPhone zobrazuje verziu pre počítač v plnej šírke.
iphone 6 bez overenia služby
Ale iPhone 5 je široký iba 320 pixelov. Nie je to vždy veľkosť výrezu?
Nie, nie je. S veľkosťou výrezu, môže byť zahrnutá zmena mierky . IPhone musí zmenšiť zobrazenie, aby mohol vidieť verziu webovej stránky v plnej šírke. Pamätajte, že oblasť zobrazenia predstavuje oblasť stránky, ktorá je aktuálne viditeľná pre používateľa. Vidí používateľ iPhone v súčasnosti iba 320 pixelov stránky alebo sa mu zobrazuje verzia s plnou šírkou?
Správne: Na svojom displeji sa im zobrazuje webová stránka s plnou šírkou, pretože iPhone predpokladal, že ide o predvolené správanie: Je zmenšený, aby si mohol používateľ pozrieť webovú stránku až do šírky 980 pixelov. Preto je výrez zariadenia iPhone 980px.
Pri približovaní alebo odďaľovaní sa mení veľkosť výrezu. Už sme si povedali, že naša imaginárna webová stránka má šírku 800 pixelov, takže ak by ste chceli priblížiť svoj iPhone tak, aby sa jeho okraje dotýkali okrajov displeja vášho iPhone, zobrazená oblasť by bola 800 pixelov. IPhone môcť mať zobrazenú oblasť 320 pixelov na webe pre počítače, ale ak by bol, videl by ste iba jeho malú časť.
správy nebudú odosielať správy
Moja responzívna webová stránka je nefunkčná. Ako to opravím?
Odpoveďou je jediný riadok kódu HTML, ktorý po vložení do hlavičky webovej stránky informuje zariadenie, aby nastavilo výrez na svoju vlastnú šírku (320px v prípade iPhone 5) a aby veľkosť stránky nezmenšovala (alebo zväčšovala).
Ak chcete získať odbornejšiu diskusiu o všetkých možnostiach týkajúcich sa tejto metaznačky, vyskúšajte tento článok 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 opravovaní toho vášho nezabudnite, že téma X nepoužíva iba jeden hlavičkový súbor - pre každý zásobník používa iné hlavičkové súbory, takže ten svoj budete musieť upraviť.
logo iphone 5s apple potom čierna obrazovka
Pretože Nick používa tému Ethos stack of X, musel do riadku, ktorý bol umiestnený v x, pridať riadok kódu, ktorý som spomínal predtým. /frameworks/views/ethos/wp-header.php . Ak používate iný zásobník, nahraďte názov svojho zásobníka (Integrity, Renew atď.) Výrazom „étos“, aby ste našli správny súbor hlavičky. Vložte ten jeden riadok a voila! Môžete ísť.
Takže toto opravuje aj moje mediálne dotazy týkajúce sa CSS?
Keď tento riadok vložíte do hlavičky súboru HTML, vaše citlivé dotazy @media zrazu začnú znova fungovať a mobilná verzia vášho webu opäť ožije. Ďakujem za prečítanie a dúfam, že to pomôže!
Nezabudnite poslať ďalej Payette,
David P.