Jeden můj přítel mě nedávno kontaktoval a požádal o pomoc s webem WordPress, který vytvořil pomocí tématu X. Jeho klient mu to ráno zavolal poté, co si všiml, že se jeho web na iPhonu nezobrazuje správně. Nick to zkontroloval sám a krásný responzivní design, který navrhl, už jistě nefunguje.
Dále byl zmaten skutečností, že když změnil velikost okna prohlížeče na ploše, web byl responzivní, ale na jeho iPhone byla zobrazena pouze verze pro stolní počítače. Proč by stránky byly responzivní na stolním počítači a nereaguje na mobilním zařízení?
Proč nefunguje responzivní design
Reagující design přestane fungovat, když v záhlaví souboru HTML chybí jeden řádek kódu. Pokud tento jediný řádek kódu chybí, váš iPhone, Android a další mobilní zařízení budou předpokládat, že web, který prohlížíte, je web pro počítače v plné velikosti a upraví velikost výřez zahrnout celou obrazovku.
Co myslíte výřezem a velikostí výřezu?
Na všech zařízeních odpovídá velikost výřezu velikosti oblasti webové stránky, která je aktuálně viditelná pro uživatele. Představte si, že držíte iPhone 5 o šířce 320 pixelů. Pokud není výslovně řečeno jinak, iPhony předpokládají, že každý web, který navštívíte, je web pro stolní počítače se šířkou 980 pixelů.
Nyní pomocí svého imaginárního iPhonu 5navštívíte web určený pro stolní počítače, který je široký 800 pixelů. Nemá responzivní rozložení, takže váš iPhone zobrazí verzi pro stolní počítače s plnou šířkou.
opravit problémy s baterií iphone 6
Ale iPhone 5 je široký pouze 320 pixelů. Není to vždy velikost výřezu?
Ne, to není. S velikostí výřezu, může být zahrnuto měřítko . IPhone se musí oddálit, aby viděl verzi webové stránky v plné šířce. Nezapomeňte, že výřez odkazuje na oblast stránky, která je aktuálně viditelná pro uživatele. Vidí uživatel iPhone aktuálně pouze 320 pixelů stránky, nebo vidí verzi v plné šířce?
To je pravda: Vidí na svém webu webovou stránku s plnou šířkou, protože iPhone předpokládá její výchozí chování: Je zmenšen, aby si uživatel mohl zobrazit webovou stránku až do šířky 980 pixelů. Výřez iPhonu je proto 980 pixelů.
Při přiblížení nebo oddálení se velikost výřezu změní. Předtím jsme řekli, že náš imaginární web má šířku 800 pixelů, takže pokud byste svůj iPhone přiblížili tak, aby se jeho okraje dotýkaly okrajů displeje vašeho iPhone, měl by výřez 800 pixelů. IPhone umět mít výřez 320 pixelů na webu pro stolní počítače, ale pokud ano, uvidíte pouze jeho malou část.
aplikace pro iPhone se neaktualizují
Můj responzivní web je nefunkční. Jak to opravím?
Odpovědí je jediný řádek kódu HTML, který po vložení do záhlaví webové stránky řekne zařízení, aby nastavilo výřez na vlastní šířku (320px v případě iPhone 5) a ne na změnu měřítka (nebo přiblížení) stránky.
Pro technickou diskusi o všech možnostech souvisejících s touto metaznačkou se podívejte tento článek na tutsplus.com .
Jak opravit téma WordPress X, když nereaguje
Zpět na mého přítele z minulosti: Tento jeden řádek kódu zmizel, když aktualizoval téma X. Při opravě toho vašeho nezapomeňte, že motiv X nepoužívá pouze jeden soubor záhlaví - pro každý zásobník používá jiné soubory záhlaví, takže ten svůj budete muset upravit.
přepněte telefon do režimu dfu
Jelikož Nick používá Ethos stack X motivu, musel přidat řádek kódu, který jsem zmínil dříve, do souboru záhlaví, který byl umístěn v x /frameworks/views/ethos/wp-header.php . Pokud používáte jiný zásobník, nahraďte název svého zásobníku (Integrity, Renew atd.) Výrazem „étos“, abyste našli správný soubor záhlaví. Vložte ten jeden řádek a voila! Je dobré jít.
Takže toto opravuje i mé dotazy na média v CSS?
Když vložíte tento řádek do záhlaví souboru HTML, vaše citlivé dotazy @media najednou začnou znovu fungovat a mobilní verze vašeho webu se znovu probudí k životu. Děkujeme za přečtení a doufám, že to pomůže!
Nezapomeňte předat Payette,
David P.