Eräs ystäväni otti äskettäin yhteyttä minuun pyytääkseen apua WordPress-sivustolle, jonka hän oli rakentanut X-teeman avulla. Hänen asiakkaansa oli soittanut hänelle sinä aamuna huomattuaan, että hänen verkkosivustonsa ei näy oikein iPhonessa. Nick tarkisti sen itse, ja varmasti, hänen suunnittelema kaunis herkkä muotoilu ei toiminut enää.
Häntä hämmensi edelleen se, että kun hän muutti selainikkunan kokoa työpöydälleen, sivustolle oli reagoiva, mutta hänen iPhonessa vain työpöydän versio näytettiin. Miksi sivusto olisi reagoiva pöytätietokoneella ja ei reagoi mobiililaitteella?
Miksi responsiivinen suunnittelu ei toimi
Reagoiva suunnittelu lakkaa toimimasta, kun yksi koodirivi puuttuu HTML-tiedoston otsikosta. Jos tämä yksittäinen koodirivi puuttuu, iPhone, Android ja muut mobiililaitteet olettavat, että tarkastelemasi verkkosivusto on täysikokoinen työpöytäsivusto, ja säätää koodin kokoa. näkymä koko näytön.
Mitä tarkoitat näkymässä ja näkymän koossa?
Kaikissa laitteissa näkymän koko viittaa käyttäjälle tällä hetkellä näkyvän verkkosivun alueen kokoon. Kuvittele, että sinulla on iPhone 5, jonka leveys on 320 pikseliä. Ellei nimenomaisesti toisin mainita, iPhone olettaa, että jokainen vierailemasi sivusto on työpöytäsivusto, jonka leveys on 980 kuvapistettä.
Kuvitteellisen iPhone 5: n avullavierailet työpöydälle suunnitellulla verkkosivustolla, jonka leveys on 800 kuvapistettä. Sillä ei ole reagoivaa asettelua, joten iPhone näyttää täysleveän työpöydän version.
iphone ei varmuuskopioi icloudiin, ei tarpeeksi tallennustilaa
Mutta iPhone 5 on vain 320 pikseliä leveä. Eikö se ole aina näkymän koko?
Ei se ei ole. Näkymän koon kanssa skaalaus voi olla mukana . IPhonen on loitonnettava nähdäksesi verkkosivun täysleveyden version. Muista, että näkymä tarkoittaa sivun aluetta, joka on käyttäjälle parhaillaan näkyvissä. Näkyykö iPhone-käyttäjä tällä hetkellä vain 320 pikseliä sivusta vai näkevätkö he täysleveyden version?
Aivan oikein: He näkevät täysleveyden verkkosivun näytöllä, koska iPhone on olettanut oletusarvoisen käyttäytymisen: Se on loitonnettu, jotta käyttäjä voi tarkastella verkkosivua, jonka leveys on enintään 980 pikseliä. Siksi iPhonen näkymä on 980 kuvapistettä.
Kun lähennät tai loitonat, näkymän koko muuttuu. Sanoimme aiemmin, että kuvitteellisen verkkosivustomme leveys on 800 kuvapistettä, joten jos lähennät iPhoneasi siten, että verkkosivun reunat koskettavat iPhonen näytön reunoja, näkymä olisi 800 kuvapistettä. IPhone voi näkymäikkuna on 320 kuvapistettä työpöytäsivustossa, mutta jos näin olisi, näet vain pienen osan siitä.
iphone x ei muodosta yhteyttä wifi -verkkoon
Reagoiva verkkosivustoni on rikki. Kuinka korjaan sen?
Vastaus on yksi HTML-rivi, joka verkkosivun otsikkoon lisättynä käskee laitetta asettamaan näkymän omalle leveydelleen (320 kuvapistettä iPhone 5: n tapauksessa) eikä skaalaan (tai zoomaamaan) sivua.
Katso tekninen keskustelu kaikista tähän sisällönkuvauskenttään liittyvistä vaihtoehdoista tämä artikkeli tutsplus.com -sivustolla .
Kuinka korjata WordPress X -teema, kun se ei reagoi
Takaisin kaverilleni edellisestä: Tämä yksi koodirivi katosi, kun hän päivitti X-teemaa. Kun korjaat omaa, muista, että X-teema ei käytä vain yhtä otsikkotiedostoa - se käyttää erilaisia otsikkotiedostoja jokaiselle pinolle, joten sinun on muokattava omaa.
iphone 6 menee suoraan vastaajaan soittamatta
Koska Nick käyttää Ethos-pino X -teemaa, hänen oli lisättävä aiemmin mainitsemani koodirivi x-otsikkotiedostoon /frameworks/views/ethos/wp-header.php . Jos käytät eri pinoa, korvaa pinosi nimi (eheys, uusiminen jne.) Eetoksella oikean otsikkotiedoston löytämiseksi. Lisää tuo yksi rivi ja voila! Sinulla on hyvä mennä.
Joten tämä korjaa CSS-mediakyselyni, liian?
Kun lisäät kyseisen rivin HTML-tiedostosi otsikkoon, responsiiviset @media-kyselysi alkavat yhtäkkiä toimia uudelleen ja verkkosivustosi mobiiliversio herää eloon. Kiitos lukemisesta ja toivon sen auttavan!
Muista maksaa Payette Forward,
David P.