En venn av meg kontaktet meg nylig for å be om hjelp med et WordPress-nettsted han hadde bygget med X-temaet. Klienten hans hadde ringt ham den morgenen etter at han la merke til at nettstedet hans ikke ble vist riktig på iPhone. Nick sjekket det ut selv, og riktignok fungerte ikke det vakre responsive designet han designet lenger.
Han ble ytterligere mystifisert av det faktum at når han endret størrelsen på nettleservinduet på skrivebordet, var nettstedet responsivt, men på iPhonen hans ble bare skrivebordsversjonen vist. Hvorfor ville et nettsted være responsivt på en stasjonær datamaskin og ikke-responsivt på en mobilenhet?
Hvorfor responsiv design ikke fungerer
Responsiv design slutter å fungere når én kodelinje mangler i overskriften til en HTML-fil. Hvis denne enkle kodelinjen mangler, vil iPhone, Android og andre mobile enheter anta at nettstedet du ser på er et skrivebordsnettsted i full størrelse, og justere størrelsen på viewportfor å omfatte hele skjermen.
Hva mener du med Viewport og Viewport Størrelse?
På alle enheter refererer størrelsen på visningsporten til størrelsen på området på en nettside som for øyeblikket er synlig for brukeren. Tenk deg at du holder en iPhone 5 med en bredde på 320 piksler. Med mindre annet er uttrykkelig fort alt, antar iPhones at hvert nettsted du besøker er et skrivebordsnettsted med en bredde på 980 piksler.
Nå, ved å bruke din imaginære iPhone 5, besøker du et nettsted designet for skrivebord som er 800px bredt. Den har ikke responsiv layout, så iPhone-en din viser skrivebordsversjonen i full bredde.
Nei det er det ikke. Med visningsportstørrelse kan skalering være involvert. iPhone må zoome ut for å se fullbreddeversjonen av nettsiden. Husk at viewport refererer til området på en side som for øyeblikket er synlig for brukeren. Ser iPhone-brukeren for øyeblikket bare 320 piksler av siden, eller ser de versjonen i full bredde?
Det stemmer: De ser nettsiden i full bredde på skjermen fordi iPhone har antatt at den er standardoppførsel: Den er zoomet ut slik at brukeren kan se en nettside opp til en bredde på 980 piksler. Derfor er iPhones visningsport 980px.
Når du zoomer inn eller ut, endres visningsportens størrelse. Vi sa før at vårt imaginære nettsted har en bredde på 800px, så hvis du skulle zoome inn iPhonen din slik at kantene på nettstedet berører kantene på iPhone-skjermen, ville visningsporten være 800px. iPhone kan ha en visningsport på 320px på en skrivebordsside, men hvis den gjorde det, ville du bare se en liten del av den.
Min responsive nettside er ødelagt. Hvordan fikser jeg det?
Svaret er en enkelt linje med HTML som når den settes inn i overskriften på en nettside ber enheten om å stille inn visningsporten til sin egen bredde (320 px for en iPhone 5) og ikke skalere (eller zoom) siden.
For en mer teknisk diskusjon av alle alternativene knyttet til denne metakoden, sjekk ut denne artikkelen på tutsplus.com.
Hvordan fikser du WordPress X-tema når det ikke er responsivt
Tilbake til vennen min fra før: Denne ene kodelinjen forsvant da han oppdaterte X-temaet. Når du fikser din, husk at X-temaet ikke bare bruker én overskriftsfil – det bruker forskjellige overskriftsfiler for hver stabel, så du må redigere din.
Siden Nick bruker Ethos-stabelen med X-temaet, måtte han legge til kodelinje jeg nevnte før til overskriftsfilen som var plassert i x /frameworks/views/ethos/wp-header.php. Hvis du bruker en annen stabel, bytter du ut navnet på stabelen din (integritet, fornyelse osv.) med 'etos' for å finne den riktige overskriftsfilen. Sett inn den ene linjen, og voila! Du er klar.
Så dette fikser mine CSS-medieforespørsler også?
Når du setter inn den linjen i overskriften på HTML-filen din, vil de responsive @media-spørringene dine plutselig begynne å fungere igjen, og mobilversjonen av nettstedet ditt kommer tilbake til live. Takk for at du leste, og jeg håper det hjelper!
Husk å Payette Forward, David P.
