Neseniai vienas mano draugas susisiekė su manimi ir paprašė pagalbos dėl „WordPress“ svetainės, kurią sukūrė naudodamas X temą. Jo klientas jam paskambino tą rytą, kai pastebėjo, kad jo svetainė netinkamai rodoma jo „iPhone“. Nickas pats tai patikrino ir tikrai, jo sukurtas gražus jautrus dizainas nebeveikė.
Jį dar labiau suglumino faktas, kad kai jis darbalaukyje pakeitė naršyklės lango dydį, svetainė buvo jautri, tačiau jo iPhone buvo rodoma tik darbalaukio versija. Kodėl svetainė reaguoja į stalinį kompiuterį, o mobiliajame įrenginyje – nereaguoja?
Kodėl reaguojantis dizainas neveikia
Reaguojantis dizainas nustoja veikti, kai HTML failo antraštėje trūksta vienos kodo eilutės. Jei trūksta šios vienos kodo eilutės, jūsų „iPhone“, „Android“ ir kiti mobilieji įrenginiai manys, kad jūsų peržiūrima svetainė yra viso dydžio staliniams kompiuteriams skirta svetainė, ir koreguoja viewport dydį. , kad apimtų visą ekraną.
Ką turite omenyje sakydami peržiūros sritį ir peržiūros srities dydį?
Visuose įrenginiuose peržiūros srities dydis nurodo tinklalapio srities, kurią šiuo metu mato vartotojas, dydį. Įsivaizduokite, kad laikote 320 pikselių pločio iPhone 5. Jei aiškiai nenurodyta kitaip, „iPhone“ daro prielaidą, kad kiekviena jūsų lankoma svetainė yra staliniams kompiuteriams skirta svetainė, kurios plotis yra 980 pikselių.
Dabar, naudodami įsivaizduojamą „iPhone 5“, apsilankote darbalaukiui skirtoje svetainėje, kurios plotis yra 800 pikselių. Jame nėra interaktyvaus išdėstymo, todėl jūsų iPhone rodoma viso pločio darbalaukio versija.
Ne, tai nėra. Atsižvelgiant į peržiūros srities dydį, galima keisti mastelį. „IPhone“ turi atitolinti, kad matytų viso pločio tinklalapio versiją. Atminkite, kad peržiūros sritis reiškia puslapio sritį, kurią šiuo metu mato vartotojas. Ar „iPhone“ naudotojas šiuo metu mato tik 320 puslapio pikselių, ar mato viso pločio versiją?
. Todėl „iPhone“ peržiūros sritis yra 980 pikselių.
Kai priartinsite arba tolinkite vaizdą, peržiūros srities dydis keičiasi. Anksčiau minėjome, kad mūsų įsivaizduojamos svetainės plotis yra 800 pikselių, taigi, jei padidintumėte savo iPhone mastelį taip, kad svetainės kraštai liestųsi su iPhone ekrano kraštais, peržiūros sritis būtų 800 pikselių. „IPhone“ gali turėti 320 pikselių peržiūros sritį darbalaukio svetainėje, tačiau jei taip būtų, pamatytumėte tik nedidelę jo dalį.
Mano jautri svetainė sugedo. Kaip tai ištaisyti?
Atsakymas yra viena HTML eilutė, kurią įterpus į tinklalapio antraštę, įrenginiui nurodoma nustatyti savo peržiūros sritį (320 pikselių, jei naudojate iPhone 5), o ne keisti mastelį. (arba padidinkite) puslapį.
Jei norite daugiau techninės diskusijos apie visas su šia metažyma susijusias parinktis, peržiūrėkite šį straipsnį adresu tutsplus.com.
Kaip pataisyti „WordPress X“ temą, kai ji nereaguoja
Atgal pas ankstesnį draugą: ši viena kodo eilutė dingo, kai jis atnaujino X temą. Taisydami savo, atminkite, kad X temoje nenaudojamas tik vienas antraštės failas – kiekvienai krūvai naudojami skirtingi antraščių failai, todėl turėsite redaguoti savąjį.
Kadangi Nickas naudoja Ethos stack of X temą, jis turėjo pridėti kodo eilutę, kurią minėjau anksčiau, į antraštės failą, esantį x /frameworks/views/ethos/wp-header.php . Jei naudojate kitą krūvą, pakeiskite savo krūvos pavadinimą (Integrity, Renew ir tt) „ethos“, kad rastumėte tinkamą antraštės failą. Įdėkite tą vieną eilutę ir voila! Viskas gerai.
Taigi, tai ištaiso ir mano CSS medijos užklausas?
Kai įterpiate šią eilutę į HTML failo antraštę, reaguojančios @media užklausos staiga vėl pradės veikti, o jūsų svetainės versija mobiliesiems atgis. Dėkojame, kad skaitėte ir tikiuosi, kad tai padės!
Prisiminkite Payette Forward, David P.
