Meng reaktiouns Websäit funktionnéiert net. De Fix: Viewport.

My Responsive Website Isn T Working







Probéiert Eisen Instrument Fir Probleemer Ze Eliminéieren

waarm Saache fir Är Frëndin ze soen

E Frënd vu mir huet mech viru kuerzem kontaktéiert fir Hëllef ze froen mat engem WordPress Site deen hie mam X Thema gebaut hat. Säi Client hat hien dee Moie geruff nodeems hie gemierkt huet datt seng Websäit net korrekt op sengem iPhone ugewisen gouf. Den Nick huet et selwer gepréift, a sécher genuch, dee schéine reaktiounsfäegen Design, deen hien entwéckelt huet, funktionnéiert net méi.





Hie gouf weider mystifizéiert vun der Tatsaach datt wann hien seng Browserfenster op sengem Desktop ännert, de Site war reagéiert, awer op sengem iPhone gouf nëmmen d'Desktop-Versioun ugewisen. Firwat wier e Site reagéiert op engem Desktop Computer an net reaktiounsfäeger op engem mobilen Apparat?



Firwat reagéiert Design net funktionnéiert

Responsive Design hält op ze schaffen wann eng Zeil Code am Header vun enger HTML Datei feelt. Wann dës eenzeg Zeil vu Code fehlt, ginn Äert iPhone, Android an aner mobilen Apparater dovun aus datt d'Websäit déi Dir kuckt eng Vollgréisst Desktop Site ass an d'Gréisst vun der Vueport fir de ganze Bildschierm ëmfaassen.

Wat mengt Dir vu Viewport a Viewport Gréisst?

Op all Apparater bezitt d'Gréisst vum Viewport d'Gréisst vum Gebitt vun enger Websäit déi de Moment fir de Benotzer sichtbar ass. Stellt Iech vir datt Dir en iPhone 5 mat enger Breet vun 320 Pixel hält. Wann net anescht ausdrécklech gesot gëtt, ginn d'iPhones dovun aus datt all Websäit déi Dir besicht en Desktop Site mat enger Breet vun 980px ass.

Elo, mat Ärem imaginäre iPhone 5,Dir besicht eng Websäit entwéckelt fir Desktop déi 800px breet ass. Et huet kee reaktiounsfäege Layout, sou datt Ären iPhone déi voll Breet Desktop Versioun affichéiert.





iPhone schellt net bei erakommen Uriff

Awer en iPhone 5 ass nëmmen 320 Pixel breet. Ass dat net ëmmer d'Gréisst vum Viewport?

Nee, et ass net. Mat Vuegréisst, Skaléiere ka bedeelegt ginn . Den iPhone muss auszoomen fir déi voll Breet Versioun vun der Websäit ze gesinn. Denkt drun datt de Viewport de Beräich vun enger Säit bezitt déi de Moment fir de Benotzer sichtbar ass. Gesäit den iPhone Benotzer de Moment just 320 Pixel vun der Säit, oder gesinn se déi voll Breet Versioun?

Dat ass richteg: Si gesinn déi voll Breet Websäit op hirem Display well den iPhone huet ugeholl datt et säi Standardverhalen ass: Et gëtt ausgezoomt sou datt de Benotzer eng Websäit bis op eng Breet vun 980 Pixel konnt gesinn. Dofir ass de Viewport vum iPhone 980px.

Wéi Dir zoomt oder eraus ännert d'Gréisst vum Viewport. Mir hu virdru gesot datt eis imaginär Websäit eng Breet vun 800px huet, also wann Dir Ären iPhone géif zoomen, sou datt d'Kante vun der Websäit d'Kante vun Ärem iPhone's Display beréieren, de Viewport wier 800px. Den iPhone kann hunn e Viewport vun 320px op engem Desktop Site, awer wann et geschitt ass, géift Dir nëmmen e klengen Deel dovun gesinn.

kann net synchroniséiert ginn well se net fonnt kënne ginn

Meng reaktiouns Websäit ass gebrach. Wéi fixen ech et?

D'Äntwert ass eng eenzeg Zeil vu HTML déi wann se an den Header vun enger Websäit agefouert gëtt datt den Apparat de Viewport op seng eege Breet setzt (320px am Fall vun engem iPhone 5) an d'Säit net ze vergréisseren (oder ze vergréisseren).

Fir eng méi technesch Diskussioun vun allen Optiounen am Zesummenhang mat dësem Metatag, kuckt dësen Artikel op tutsplus.com .

Wéi Fixe WordPress X Thema Wann et net reagéiert ass

Zréck op mäi Frënd vu vir: Dës eng Zeil Code verschwonnen wéi hien d'X Thema aktualiséiert. Wann Dir Är fixéiert, denkt drun datt d'X Thema net nëmmen eng Header Datei benotzt - et benotzt verschidde Header Dateien fir all Stack, also musst Dir Äert änneren.

firwat kléngt mäin Telefon gedämpft

Well den Nick den Ethos Stack vum X Thema benotzt, huet hien d'Linn vum Code, deen ech virdru gesot hunn, an d'Headder Datei déi an x ​​war /frameworks/views/ethos/wp-header.php . Wann Dir en anere Stack benotzt, ersetzt den Numm vun Ärem Stack (Integritéit, Erneieren, asw.) Fir 'ethos' fir déi richteg Header-Datei ze fannen. Setzt déi eng Zeil a voila! Dir sidd gutt fir ze goen.

Also fixéiert dëst Meng CSS Media Queries, ze?

Wann Dir dës Zeil an den Header vun Ärer HTML Datei setzt, fänken Är reaktiounsfäeg @ media Ufroen op eemol erëm un an déi mobil Versioun vun Ärer Websäit wäert erëm lieweg ginn. Merci fir d'Liesen an ech hoffen et hëlleft!

Denkt drun Payette Forward ze maachen,
David P.