'N Vriend van my het my onlangs gekontak om hulp te vra met 'n WordPress-werf wat hy met die X-tema gebou het. Sy kliënt het hom die oggend gebel nadat hy opgemerk het dat sy webwerf nie korrek op sy iPhone vertoon nie. Nick het dit self nagegaan, en seker genoeg, die pragtige responsiewe ontwerp wat hy ontwerp het, werk nie meer nie.
Hy was verder verbaas deur die feit dat die webwerf toe hy sy blaaiervenster op sy lessenaar verander het was reageerbaar, maar op sy iPhone is slegs die lessenaarweergawe vertoon. Waarom sou 'n webwerf wees reageer op 'n rekenaar en reageer nie op 'n mobiele toestel nie?
Waarom responsiewe ontwerp nie werk nie
Responsiewe ontwerp hou op werk as een kode in die koptekst van 'n HTML-lêer ontbreek. As hierdie enkele reël kode ontbreek, sal u iPhone, Android en ander mobiele toestelle aanvaar dat die webwerf wat u besigtig 'n grootte-werkskerm werf is en die grootte van die uitsigpoort om die hele skerm te omvat.
Wat bedoel u met die grootte van die uitsig en die uitsig?
Op alle toestelle verwys die grootte van die uitsigportaal na die grootte van die area van 'n webblad wat tans vir die gebruiker sigbaar is. Stel jou voor dat jy 'n iPhone 5 met 'n breedte van 320 pixels het. Tensy uitdruklik anders vermeld, neem iPhones aan dat elke webwerf wat u besoek, 'n werf vir 'n lessenaar met 'n breedte van 980 px is.
Gebruik nou u denkbeeldige iPhone 5,u besoek 'n webwerf wat 800 piks breed is vir lessenaars. Dit het nie 'n responsiewe uitleg nie, dus vertoon jou iPhone die volledige weergawe van die lessenaar.
hoe kopieer u 'n sms -boodskap
Maar 'n iPhone 5 is net 320 pixels breed. Is dit nie altyd die grootte van die uitsigportaal nie?
Nee dit is nie. Met die aansig grootte skaal kan betrek word . Die iPhone moet uitsoem om die volledige weergawe van die webblad te sien. Onthou dat viewport verwys na die area van 'n bladsy wat tans vir die gebruiker sigbaar is. Sien die iPhone-gebruiker tans net 320 pixels van die bladsy, of sien hulle die volledige weergawe?
Dit is reg: hulle sien die volledige breedte-webwerf op hul skerm omdat die iPhone aangeneem het dat dit die standaardgedrag is: dit is uitgezoom sodat die gebruiker 'n webblad tot 'n breedte van 980 pixels kan sien. Daarom is die iPhone se aansig 980 px.
Terwyl u in- of uitzoom, verander die grootte van die aansigpoort. Ons het voorheen gesê dat ons denkbeeldige webwerf 'n breedte van 800 px het, dus as u u iPhone sou inzoomen sodat die kante van die webwerf aan die kante van u iPhone se skerm raak, sou die aansigpoort 800 px wees. Die iPhone kan het 'n uitsigposisie van 320 px op 'n werf vir 'n lessenaar, maar as dit die geval was, sou u net 'n klein gedeelte daarvan sien.
syknoppie op iphone werk nie
My responsiewe webwerf is gebreek. Hoe herstel ek dit?
Die antwoord is 'n enkele reël HTML wat, wanneer dit in die koptekst van 'n webblad geplaas word, vir die toestel sê om die aansig op sy eie breedte te stel (320px in die geval van 'n iPhone 5) en om nie die bladsy te vergroot (of te vergroot) nie.
Vir 'n meer tegniese bespreking van al die opsies wat verband hou met hierdie metatag, gaan na hierdie artikel op tutsplus.com .
Hoe om WordPress X-tema op te los as dit nie reageer nie
Terug na my vriend van vooraf: Hierdie een reël kode het verdwyn toe hy die X-tema opgedateer het. Hou in gedagte dat die X-tema nie net een koplêer gebruik nie - dit gebruik verskillende koplêers vir elke stapel, dus moet u die uwe wysig.
telefoon bly verbind en ontkoppel van wifi
Aangesien Nick die Ethos-stapel van X-tema gebruik, moes hy die kode kode wat ek voorheen genoem het, byvoeg tot die koplêer in x /frameworks/views/ethos/wp-header.php . As u 'n ander stapel gebruik, vervang die naam van u stapel (Integriteit, Vernuwe, ens.) Deur 'ethos' om die regte koplêer te vind. Sit daardie een reël in, en voila! Jy is goed om te gaan.
So maak dit ook my CSS-mediavrae reg?
As u die lyn in die kopkop van u HTML-lêer plaas, sal u reageerbare @media-navrae skielik weer begin werk en sal die mobiele weergawe van u webwerf weer lewendig word. Dankie vir die lees en ek hoop dit help!
Onthou om Payette aan te stuur,
David P.