En venn av meg kontaktet meg nylig for å be om hjelp med et WordPress-nettsted han hadde bygget med X-temaet. Hans klient hadde ringt ham den morgenen etter at han la merke til at nettsiden hans ikke ble vist riktig på iPhone. Nick sjekket det ut selv, og sikkert, den vakre responsive designen han designet fungerte ikke lenger.
Han ble ytterligere mystifisert av det faktum at da han endret størrelsen på nettleservinduet på skrivebordet, nettstedet var lydhør, men på iPhone-en hans ble bare skrivebordsversjonen vist. Hvorfor ville et nettsted være det? responsiv på en stasjonær datamaskin og ikke-responsiv på en mobil enhet?
Hvorfor responsivt design ikke fungerer
Responsivt design slutter å fungere når det mangler en kodelinje i overskriften til en HTML-fil. Hvis denne eneste kodelinjen mangler, antar iPhone, Android og andre mobile enheter at nettstedet du ser er et fullstørrelses skrivebordsside og justerer størrelsen på visningsport for å omfatte hele skjermen.
Hva mener du med visnings- og visningsstørrelse?
På alle enheter refererer størrelsen på visningsporten til størrelsen på området på en webside 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 fortalt, antar iPhones at hvert nettsted du besøker er et skrivebordsside med en bredde på 980 px.
Nå, ved hjelp av din imaginære iPhone 5,du besøker et nettsted designet for skrivebordet som er 800 px bredt. Den har ikke et responsivt oppsett, så iPhone viser desktopversjonen i full bredde.
itunes gjenkjenner ikke iphone 7
Men en iPhone 5 er bare 320 piksler bred. Er det ikke alltid størrelsen på utsikten?
Nei det er det ikke. Med visningsstørrelse, skalering kan være involvert . IPhone må zoome ut for å se versjonen i full bredde av websiden. Husk at visningsport refererer til området på en side som for øyeblikket er synlig for brukeren. Ser iPhone-brukeren for øyeblikket bare 320 piksler på siden, eller ser de versjonen i full bredde?
Det stemmer: De ser hjemmesiden i full bredde på skjermen fordi iPhone har antatt at den er standard atferd: Den er zoomet ut slik at brukeren kan se en webside opp til en bredde på 980 piksler. Derfor er iPhone-visningen 980 px.
Når du zoomer inn eller ut, endres visningsstørrelsen. Vi sa tidligere at vårt imaginære nettsted har en bredde på 800 piksler, så hvis du skulle zoome inn på iPhone-en slik at kantene på nettstedet berørte kantene på iPhone-skjermen, ville visningsområdet være 800 piksler. IPhone kan har en visningsport på 320 px på et stasjonært nettsted, men hvis det gjorde det, ville du bare se en liten del av det.
apper på iphone oppdateres ikke
Mitt responsive nettsted er ødelagt. Hvordan fikser jeg det?
Svaret er en enkelt linje med HTML som når den settes inn i overskriften på en webside, ber enheten om å stille visningsfeltet til sin egen bredde (320 piksler når det gjelder en iPhone 5) og ikke skalere (eller zoome) siden.
For en mer teknisk diskusjon av alle alternativene knyttet til denne metakoden, sjekk ut denne artikkelen på tutsplus.com .
Slik løser du WordPress X-tema når det ikke er responsivt
Tilbake til min venn fra før: Denne ene linjens kode forsvant da han oppdaterte X-temaet. Når du fikser din, må du huske at X-temaet ikke bare bruker en toppfil - den bruker forskjellige toppfiler for hver bunke, så du må redigere din.
hva er en operatøroppdatering
Siden Nick bruker Ethos-stakken med X-tema, måtte han legge til kodelinje jeg nevnte tidligere i toppfilen som var plassert i x /frameworks/views/ethos/wp-header.php . Hvis du bruker en annen stabel, erstatt navnet på stakken din (Integritet, Forny osv.) Med ‘ethos’ for å finne riktig topptekstfil. Sett inn den ene linjen, og voila! Du er god å gå.
Så dette løser også mine CSS-mediespørsmål?
Når du setter inn den linjen i overskriften til HTML-filen, vil dine responsive @media-spørsmål plutselig begynne å fungere igjen, og mobilversjonen av nettstedet ditt vil komme tilbake til livet. Takk for at du leser, og jeg håper det hjelper!
Husk å betale videre,
David P.