Ystäväni otti minuun äskettäin yhteyttä pyytääkseen apua WordPress-sivustolle, jonka hän oli rakentanut käyttämällä X-teemaa. Hänen asiakkaansa oli soittanut hänelle sinä aamuna, kun hän huomasi, että hänen verkkosivustonsa ei näy oikein hänen iPhonessaan. Nick tarkisti sen itse, ja varmasti hänen suunnittelemansa kaunis responsiivinen muotoilu ei enää toiminut.
Häntä mystisi vielä se tosiasia, että kun hän muutti selainikkunansa kokoa työpöydällään, sivusto oli responsiivinen, mutta hänen iPhonessaan näkyi vain työpöytäversio. Miksi sivuston pitäisi olla responsiivinen pöytätietokoneella ja ei-responsiivinen mobiililaitteella?
Miksi reagoiva suunnittelu ei toimi
Responsiivinen suunnittelu lakkaa toimimasta, kun yksi koodirivi puuttuu HTML-tiedoston otsikosta. Jos tämä yksi koodirivi puuttuu, iPhone, Android ja muut mobiililaitteesi olettavat, että tarkastelemasi verkkosivusto on täysikokoinen työpöytäsivusto ja säätävät viewport kokoa.kattaa koko näytön.
Mitä tarkoitat kuvaportilla ja näkymän koolla?
Kaikissa laitteissa näkymän koko tarkoittaa verkkosivun käyttäjälle tällä hetkellä näkyvän alueen kokoa. Kuvittele, että sinulla on iPhone 5, jonka leveys on 320 pikseliä. Ellei nimenomaisesti toisin mainita, iPhonet olettavat, että jokainen vierailemasi verkkosivusto on työpöytäsivusto, jonka leveys on 980 pikseliä.
Nyt käytät kuvitteellista iPhone 5:täsi 800 pikseliä leveällä verkkosivustolla, joka on suunniteltu työpöydälle. Siinä ei ole responsiivista asettelua, joten iPhonesi näyttää täysleveän työpöytäversion.
Ei se ei ole. Näkymän kokoa käytettäessä skaalaus voi olla mukana. IPhonen on loitonnattava nähdäkseen verkkosivun täysleveän version. Muista, että näkymä viittaa sivun alueeseen, joka on tällä hetkellä käyttäjälle näkyvissä. Näkeekö iPhonen käyttäjä tällä hetkellä vain 320 pikseliä sivusta vai näkeekö he koko leveän version?
Aivan oikein: He näkevät näytöllään täysleveän verkkosivun, koska iPhone on olettanut sen oletuskäyttäytymisen: Se on loitotettu, jotta käyttäjä voi tarkastella verkkosivua, jonka leveys on enintään 980 pikseliä. Siksi iPhonen näkymä on 980 pikseliä.
Kun lähennät tai loitonnat, näkymän koko muuttuu. Sanoimme aiemmin, että kuvitteellisen verkkosivustomme leveys on 800 pikseliä, joten jos zoomaaisit iPhonea niin, että verkkosivuston reunat koskettaisivat iPhonesi näytön reunoja, näkymä olisi 800 pikseliä. IPhonen näyttöportti voi olla 320 pikseliä työpöytäsivustolla, mutta jos näin olisi, näkisit vain pienen osan siitä.
Responsiivinen verkkosivustoni on rikki. Kuinka korjaan sen?
Vastaus on yksi rivi HTML-koodia, joka verkkosivun otsikkoon lisättynä käskee laitetta asettamaan näkymän omaan leveyteensä (320px iPhone 5:n tapauksessa) eikä skaalaamaan. (tai zoomaa) sivua.
Jos haluat teknisempää keskustelua kaikista tähän sisällönkuvauskenttään liittyvistä vaihtoehdoista, katso tämä artikkeli osoitteessa tutsplus.com.
Kuinka korjata WordPress X -teemaa, kun se ei reagoi
Takaisin ystävälleni aikaisemmasta: Tämä yksi koodirivi katosi, kun hän päivitti X-teeman. Kun korjaat omaasi, muista, että X-teema ei käytä vain yhtä otsikkotiedostoa – se käyttää eri otsikkotiedostoja jokaiselle pinolle, joten sinun on muokattava omaasi.
Koska Nick käyttää Ethos-pinoa X, hänen oli lisättävä aiemmin mainitsemani koodirivi otsikkotiedostoon, joka sijaitsi kansiossa x /frameworks/views/ethos/wp-header.php . Jos käytät toista pinoa, korvaa "ethos" pinon nimellä (Integrity, Renew jne.) oikean otsikkotiedoston löytämiseksi. Lisää tuo yksi rivi ja voila! Olet valmis.
Korjaako tämä myös CSS-mediakyselyni?
Kun lisäät kyseisen rivin HTML-tiedostosi otsikkoon, reagoivat @media-kyselysi alkavat yhtäkkiä taas toimia ja verkkosivustosi mobiiliversio herää henkiin. Kiitos, että luit ja toivottavasti se auttaa!
Muista Payette Forward, David P.
