In freon fan my hat koartlyn kontakt mei my opnommen om help te freegjen mei in WordPress-side dy't hy hie boud mei it X-tema. Syn kliïnt hie him dy moarns belle nei't er fernaam dat syn webside net goed op syn iPhone waard werjûn. Nick kontrolearre it sels út, en wis genôch wurke it prachtige responsive ûntwerp dat hy ûntwurp net mear.
Hy waard fierder mystifisearre troch it feit dat doe't hy de grutte fan syn browservenster op syn buroblêd de side feroare wie responsyf, mar op syn iPhone waard allinich de buroblêdferzje werjûn. Wêrom soe in side wêze responsyf op in buroblêdcomputer en net reageare op in mobyl apparaat?
Wêrom responsyf ûntwerp net wurket
Responsyf ûntwerp stopt mei wurkjen as ien rigel koade ûntbrekt yn 'e koptekst fan in HTML-bestân. As dizze inkele rigel koade ûntbrekt, sille jo iPhone, Android en oare mobile apparaten der fan út gean dat de webside dy't jo besjogge in buroblêdside yn folsleine grutte is en de grutte fan 'e oanpasse viewport om it heule skerm te omfetsjen.
Wat bedoele jo mei werjefte- en werjaangrutte?
Op alle apparaten ferwiist de grutte fan it werjaanport nei de grutte fan it gebiet fan in webside dy't op it stuit sichtber is foar de brûker. Stel jo foar dat jo in iPhone 5 hâlde mei in breedte fan 320 piksels. Behalven eksplisyt oars ferteld, geane iPhones derfan út dat elke webside dy't jo besykje in desktopside is mei in breedte fan 980px.
No, mei jo tinkbyldige iPhone 5,jo besykje in webside ûntworpen foar buroblêd dy't 800px breed is. It hat gjin responsive opmaak, dus jo iPhone toant de buroblêdferzje mei folsleine breedte.
iphone -skerm rare kleuren en rigels
Mar in iPhone 5 is mar 320 piksels breed. Is dat net altyd de grutte fan 'e viewport?
Nee, it is net. Mei werjaangrutte, skaalfergrutting kin wurde belutsen , De iPhone moat útzoome om de folsleine ferzje fan 'e webside te sjen. Tink derom dat viewport ferwiist nei it gebiet fan in side dat op it stuit sichtber is foar de brûker. Sjocht de iPhone-brûker op it stuit krekt 320 piksels fan 'e pagina, of sjogge se de ferzje mei folsleine breedte?
Dat kloppet: Se sjogge de webside mei folsleine breedte op har display, om't de iPhone hat oannommen dat it standertgedrach is: It is útzoomd, sadat de brûker in webside kin sjen oant in breedte fan 980 piksels. Dêrom is it werjaanport fan 'e iPhone 980px.
As jo yn- of útzoome feroaret de werjeftegrutte. Wy seine earder dat ús tinkbyldige webside in breedte hat fan 800px, dus as jo jo iPhone soene ynzoome, sadat de rânen fan 'e webside de rânen fan' e werjefte fan jo iPhone oanrekke, soe de werjefteport 800px wêze. De iPhone kinne hawwe in viewport fan 320px op in buroblêdside, mar as dat die, soene jo mar in lyts diel dêrfan sjen.
wifi bliuwt ferkeard wachtwurd sizze
Myn responsive webside is brutsen. Hoe kin ik it reparearje?
It antwurd is in inkele rigel HTML dy't as ynfoege yn 'e koptekst fan in webside it apparaat fertelt de werjefteport yn te stellen op' e eigen breedte (320px yn 't gefal fan in iPhone 5) en de side net te skaaljen (of zoomje).
Foar in mear technyske diskusje oer alle opsjes relatearre oan dizze metatag, kontrolearje dan dit artikel op tutsplus.com ,
Hoe kinne jo WordPress X-tema reparearje as it net responsyf is
Werom nei myn freon fan tefoaren: Dizze iene rigel koade ferdwûn doe't hy it X-tema bywurke. Hâld by it fêststellen fan jo yn gedachten dat it X-tema net allinich ien koptekstbestân brûkt - it brûkt ferskillende koptekstbestannen foar elke stapel, dus jo moatte jo bewurkje.
hoe jo jo nûmer kinne blokkearje by it oproppen op iphone
Sûnt Nick de Ethos-stapel fan X-tema brûkt, moast hy rigel koade dy't ik earder neamde tafoegje oan it koptekstbestân dat yn x lei /frameworks/views/ethos/wp-header.php , As jo in oare stapel brûke, ferfange dan de namme fan jo stapel (yntegriteit, fernije, ensfh.) Foar 'ethos' om it juste koptekstbestân te finen. Foegje dy iene rigel yn, en voila! Jo binne goed om te gean.
Dat repareart myn CSS-media-fragen ek?
As jo dizze rigel ynfoegje yn 'e koptekst fan jo HTML-bestân, sille jo responsive @media-fragen ynienen wer wurkje en sil de mobile ferzje fan jo webside wer libje. Betanke foar it lêzen en ik hoopje dat it helpt!
Tink derom om Payette troch te stjoeren,
David P.