Můj přítel mě nedávno kontaktoval s žádostí o pomoc s webem WordPress, který vytvořil pomocí tématu X. Jeho klient mu zavolal toho rána poté, co si všiml, že se jeho web na jeho iPhonu nezobrazuje správně. Nick si to sám ověřil a jistě, krásný responzivní design, který navrhl, už nefungoval.
Byl dále zmaten tím, že když změnil velikost okna prohlížeče na ploše, stránka byla responzivní, ale na jeho iPhonu se zobrazovala pouze verze pro stolní počítače. Proč by měl být web responzivní na stolním počítači a neresponzivní na mobilním zařízení?
Proč responzivní design nefunguje
Responzivní 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ý si prohlížíte, je web v plné velikosti pro počítače, a upraví velikost viewportpro pokrytí celé obrazovky.
Co máte na mysli pod výřezem a velikostí výřezu?
Na všech zařízeních se velikost zobrazované oblasti týká 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ě uvedeno jinak, telefony iPhone předpokládají, že každý web, který navštívíte, je web pro počítače o šířce 980 pixelů.
Nyní pomocí svého imaginárního iPhonu 5 navštívíte webovou stránku určenou pro stolní počítače o šířce 800 pixelů. Nemá responzivní rozložení, takže váš iPhone zobrazuje desktopovou verzi v plné šířce.
Ne, to není. S velikostí výřezu lze zapojit změnu měřítka. iPhone se musí oddálit, aby viděl verzi webové stránky v plné šířce. Pamatujte, že zobrazovaná oblast označuje oblast stránky, která je aktuálně viditelná pro uživatele. Vidí uživatel iPhone aktuálně jen 320 pixelů stránky, nebo vidí verzi v plné šířce?
Správně: Na svém displeji vidí webovou stránku v plné šířce, protože iPhone předpokládal, že je to výchozí chování: Je oddálená, takže uživatel může zobrazit webovou stránku až do šířky 980 pixelů. Proto je výřez iPhonu 980 pixelů.
Jak přibližujete nebo oddalujete, velikost výřezu se mění. Již dříve jsme řekli, že náš imaginární web má šířku 800 pixelů, takže pokud byste svůj iPhone přiblížili tak, aby se okraje webu dotýkaly okrajů displeje vašeho iPhone, zobrazovaná oblast by byla 800 pixelů. iPhone může mít zobrazenou oblast 320 pixelů na webu pro stolní počítače, ale pokud ano, viděli byste jen malou část.
Můj responzivní web je nefunkční. Jak to opravím?
Odpovědí je jeden řádek HTML, který po vložení do záhlaví webové stránky sdělí zařízení, aby nastavilo výřez na vlastní šířku (320 pixelů v případě iPhonu 5) a ne na měřítko. (nebo přiblížit) stránku.
Techničtější diskusi o všech možnostech souvisejících s touto metaznačkou najdete v tomto článku na tutsplus.com.
Jak opravit téma WordPress X, když nereaguje
Zpět k mému příteli z dřívějška: Tento jeden řádek kódu zmizel, když aktualizoval téma X. Při opravě toho vašeho mějte na paměti, že téma X nepoužívá pouze jeden soubor záhlaví – pro každý zásobník používá jiné soubory záhlaví, takže budete muset upravit ten svůj.
Vzhledem k tomu, že Nick používá zásobník Ethos motivu X, 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ázvem svého zásobníku (Integrity, Renew atd.) „ethos“, abyste našli správný soubor záhlaví. Vložte ten jeden řádek a voila! Můžete jít.
Takže to opravuje i mé dotazy na média CSS?
Když vložíte tento řádek do záhlaví svého HTML souboru, vaše responzivní @media dotazy začnou náhle znovu fungovat a mobilní verze vašeho webu ožije. Děkuji za přečtení a doufám, že to pomůže!
Nezapomeňte na předání výplaty, David P.
