En af mine venner kontaktede mig for nylig for at bede om hjælp til et WordPress-websted, han havde bygget med X-temaet. Hans klient havde ringet til ham den morgen, efter at han bemærkede, at hans hjemmeside ikke blev vist korrekt på hans iPhone. Nick tjekkede det selv ud, og ganske rigtigt virkede det smukke responsive design, han designede, ikke længere.
Han blev yderligere mystificeret over det faktum, at når han ændrede størrelsen på sit browservindue på sit skrivebord, var webstedet responsivt, men på hans iPhone blev kun desktopversionen vist. Hvorfor ville et websted være responsivt på en stationær computer og ikke-responsive på en mobilenhed?
Hvorfor responsivt design ikke virker
Responsivt design holder op med at fungere, når der mangler en kodelinje i overskriften på en HTML-fil. Hvis denne enkelte linje kode mangler, vil din iPhone, Android og andre mobilenheder antage, at det websted, du ser, er et desktop-websted i fuld størrelse, og justere størrelsen på viewportfor at omfatte hele skærmen.
Hvad mener du med Viewport og Viewport Størrelse?
På alle enheder refererer størrelsen af visningsporten til størrelsen af det område af en webside, der i øjeblikket er synlig for brugeren. Forestil dig, at du holder en iPhone 5 med en bredde på 320 pixels. Medmindre andet er udtrykkeligt fort alt, antager iPhones, at hvert websted, du besøger, er et desktop-websted med en bredde på 980px.
Nu, ved at bruge din imaginære iPhone 5, besøger du et websted designet til desktop, der er 800px bredt. Den har ikke et responsivt layout, så din iPhone viser desktopversionen i fuld bredde.
Nej det er ikke. Med viewport-størrelse kan skalering være involveret. iPhonen skal zoome ud for at se websidens version i fuld bredde. Husk, at viewport refererer til det område på en side, der i øjeblikket er synligt for brugeren. Ser iPhone-brugeren i øjeblikket kun 320 pixels af siden, eller ser de versionen i fuld bredde?
Det er rigtigt: De ser websiden i fuld bredde på deres skærm, fordi iPhone har antaget, at den er standardadfærd: Den er zoomet ud, så brugeren kan se en webside op til en bredde på 980 pixels. Derfor er iPhones viewport 980px.
Når du zoomer ind eller ud, ændres visningsportens størrelse. Vi sagde før, at vores imaginære hjemmeside har en bredde på 800px, så hvis du skulle zoome ind på din iPhone, så hjemmesidens kanter rører kanterne på din iPhones skærm, ville visningsporten være 800px. iPhone kan have en viewport på 320px på et desktop-websted, men hvis det gjorde, ville du kun se en lille del af det.
My Responsive Website Is Broken. Hvordan fikser jeg det?
Svaret er en enkelt linje HTML, der, når den indsættes i overskriften på en webside, fortæller enheden om at indstille visningsporten til dens egen bredde (320px i tilfælde af en iPhone 5) og ikke skalere (eller zoom) på siden.
For en mere teknisk diskussion af alle mulighederne relateret til dette metatag, se denne artikel på tutsplus.com.
Sådan rettes WordPress X-tema, når det ikke er responsivt
Tilbage til min ven fra før: Denne ene kodelinje forsvandt, da han opdaterede X-temaet. Når du reparerer dit, skal du huske på, at X-temaet ikke kun bruger én header-fil – det bruger forskellige header-filer til hver stak, så du bliver nødt til at redigere din.
Da Nick bruger Ethos-stakken af X-tema, var han nødt til at tilføje kodelinje, som jeg nævnte før, til header-filen, der var placeret i x /frameworks/views/ethos/wp-header.php. Hvis du bruger en anden stak, skal du erstatte navnet på din stak (Integrity, Renew, osv.) med 'ethos' for at finde den korrekte header-fil. Indsæt den ene linje, og voila! Du er klar.
Så dette retter også mine CSS-medieforespørgsler?
Når du indsætter den linje i overskriften på din HTML-fil, vil dine responsive @media-forespørgsler pludselig begynde at fungere igen, og mobilversionen af dit websted kommer tilbage til live. Tak fordi du læste med, og jeg håber det hjælper!
Husk at Payette Forward, David P.
