Mano draugas neseniai susisiekė su manimi ir paprašė pagalbos dėl „WordPress“ svetainės, kurią jis sukūrė naudodamas „X“ temą. Tą rytą jo klientas paskambino jam pastebėjus, kad jo svetainė „iPhone“ rodoma netinkamai. Nikas pats tai patikrino ir tikrai, jo sukurtas gražus reaguojantis dizainas nebeveikė.
Jį dar labiau mistifikavo tai, kad kai jis pakeitė savo naršyklės lango dydį savo darbalaukyje, svetainėje buvo reaguoja, tačiau jo „iPhone“ buvo rodoma tik darbalaukio versija. Kodėl turėtų būti svetainė reaguoja staliniame kompiuteryje ir nereaguoja mobiliajame įrenginyje?
Kodėl reaguojantis dizainas neveikia
Interaktyvus dizainas nustoja veikti, kai trūksta vienos kodo eilutės HTML failo antraštėje. Jei trūksta šios vienos kodo eilutės, „iPhone“, „Android“ ir kiti mobilieji įrenginiai laikys, kad jūsų žiūrima svetainė yra viso dydžio darbalaukio svetainė, ir koreguos peržiūros sritis apimti visą ekraną.
Ką reiškia „Viewport“ ir „Viewport Size“?
Visuose įrenginiuose peržiūros srities dydis reiškia tinklalapio ploto dydį, kuris šiuo metu yra matomas vartotojui. Įsivaizduokite, kad laikote „iPhone 5“, kurio plotis yra 320 taškų. Jei aiškiai nenurodyta kitaip, „iPhone“ daro prielaidą, kad kiekviena jūsų lankoma svetainė yra 980 taškų pločio darbalaukio svetainė.
Dabar, naudodamas savo įsivaizduojamą „iPhone 5“,lankotės staliniams kompiuteriams skirtoje svetainėje, kurios plotis yra 800 taškų. Jis neturi reaguojančio išdėstymo, todėl jūsų „iPhone“ rodo viso pločio darbalaukio versiją.
mobilusis telefonas eina į balso paštą
Tačiau „iPhone 5“ yra tik 320 taškų pločio. Ar ne visada tai yra peržiūros srities dydis?
Ne, tai nėra. Su peržiūros srities dydžiu gali būti naudojamas mastelis . „IPhone“ turi nutolinti, kad būtų galima pamatyti viso tinklalapio versiją. Atminkite, kad peržiūros sritis reiškia puslapio sritį, kuri šiuo metu yra matoma vartotojui. Ar „iPhone“ vartotojas šiuo metu mato tik 320 pikselių puslapio, ar mato viso pločio versiją?
Teisingai: jie savo ekrane mato viso pločio tinklalapį, nes „iPhone“ padarė prielaidą, kad tai yra numatytasis elgesys: jis nutolintas, kad vartotojas galėtų peržiūrėti iki 980 taškų pločio tinklalapį. Todėl „iPhone“ peržiūros sritis yra 980 taškų.
Kai priartinama ar nutolinama, peržiūros srities dydis keičiasi. Anksčiau sakėme, kad mūsų įsivaizduojamos svetainės plotis yra 800 taškų, taigi, jei priartintumėte savo „iPhone“ taip, kad svetainės kraštai liestų jūsų „iPhone“ ekrano kraštus, peržiūros sritis būtų 800 taškų. „IPhone“ gali darbalaukio svetainėje turite 320 taškų peržiūros sritį, bet jei taip būtų, matytumėte tik nedidelę jos dalį.
kodėl mano „iPhone“ skamba aidas
Mano reaguojanti svetainė yra sugadinta. Kaip tai išspręsti?
Atsakymas yra viena HTML eilutė, kurią įterpus į tinklalapio antraštę prietaisas liepia nustatyti peržiūros sritį pagal savo plotį („320 piks.„ IPhone 5 “atveju), o ne keisti mastelį (arba mastelį).
Norėdami išsamiau aptarti visas su šia metažyma susijusias parinktis, apsilankykite šį straipsnį rasite tutsplus.com .
Kaip pataisyti „WordPress X“ temą, kai ji nėra jautri
Grįžau pas mano draugą iš anksčiau: ši viena kodo eilutė dingo, kai jis atnaujino X temą. Tvarkydami savo, nepamirškite, kad X tema nenaudoja tik vieno antraštės failo - kiekvienam kaminui ji naudoja skirtingus antraštės failus, todėl turėsite redaguoti savo.
mano „iPhone“ nespės atblokuoti
Kadangi Nikas naudoja „Ethos“ šūsnį X, jis turėjo pridėti kodą, kurį jau minėjau, prie antraštės failo, esančio x /frameworks/views/ethos/wp-header.php . Jei naudojate kitą kaminą, pakeiskite „stack“ pavadinimą („Integrity“, „Renew“ ir kt.), Kad rastumėte teisingą antraštės failą. Įterpkite tą vieną eilutę ir voila! Tau gera eiti.
Taigi, tai taip pat išsprendžia mano CSS medijos užklausas?
Kai įterpsite šią eilutę į HTML failo antraštę, jūsų atsakomosios @media užklausos staiga vėl pradės veikti ir mobilioji jūsų svetainės versija vėl atgims. Ačiū, kad skaitėte, ir tikiuosi, kad tai padės!
Nepamirškite persiųsti „Payette“,
Davidas P.