Egy barátom nemrég felkeresett, hogy segítséget kérjen egy általa az X témával készített WordPress-webhelyhez. Ügyfele aznap reggel felhívta, miután észrevette, hogy webhelye nem jelenik meg megfelelően az iPhone-ján. Nick maga is megnézte, és bizony, az általa tervezett gyönyörű reszponzív dizájn már nem működött.
További megbizonyosodott arról, hogy amikor átméretezte a böngészőablakot az asztalon, az oldal reszponzív volt, iPhone-ján viszont csak az asztali verzió jelent meg. Miért lenne reszponzív egy webhely asztali számítógépen és miért nem reagál mobileszközön?
Miért nem működik a reszponzív tervezés
A reszponzív tervezés leáll, ha egy HTML-fájl fejlécéből hiányzik egy kódsor. Ha ez az egyetlen kódsor hiányzik, iPhone, Android és más mobileszközei azt feltételezik, hogy a megtekintett webhely egy teljes méretű asztali webhely, és módosítja a viewport méretét.a teljes képernyő lefedéséhez.
Mit értesz nézetablakon és nézetablak méretén?
Minden eszközön a nézetablak mérete a weboldal felhasználó számára jelenleg látható területének méretére vonatkozik. Képzelje el, hogy egy 320 pixel szélességű iPhone 5-öt tart a kezében. Hacsak nincs kifejezetten másképp megadva, az iPhone készülékek azt feltételezik, hogy minden meglátogatott webhely 980 képpont szélességű asztali webhely.
Most a képzeletbeli iPhone 5 segítségével felkeres egy 800 képpont széles, asztali számítógépre tervezett webhelyet. Nincs érzékeny elrendezése, így iPhone-ja a teljes szélességű asztali verziót jeleníti meg.
Nem ez nem. A nézetablak méretével a méretezés is szóba jöhet. Az iPhone-nak kicsinyítenie kell a weboldal teljes szélességű verziójának megtekintéséhez. Ne feledje, hogy a nézetablak az oldal azon területére vonatkozik, amely jelenleg látható a felhasználó számára. Az iPhone felhasználó jelenleg csak az oldal 320 képpontját látja, vagy a teljes szélességű verziót?
Így van: a teljes szélességű webold alt látják a kijelzőjükön, mert az iPhone azt feltételezte, hogy ez az alapértelmezett viselkedés: Ki van kicsinyítve, így a felhasználó akár 980 pixel szélességű webold alt is megtekinthet. Ezért az iPhone nézetablaka 980 képpont.
A nagyításkor vagy kicsinyítéskor a nézetablak mérete változik. Korábban már említettük, hogy képzeletbeli weboldalunk szélessége 800 képpont, tehát ha úgy nagyítaná az iPhone-ját, hogy a weboldal szélei érintkezzenek az iPhone kijelzőjének széleivel, akkor a nézet 800 képpontos lesz. Az iPhone 320 képpontos nézetablakkal rendelkezhet asztali webhelyeken, de ha igen, akkor csak egy kis részét látná.
Reszponzív webhelyem megszakadt. Hogyan javíthatom ki?
A válasz egy sor HTML, amely egy weboldal fejlécébe beillesztve azt mondja az eszköznek, hogy állítsa be a nézetablakot a saját szélességére (iPhone 5 esetén 320 képpont), és ne léptessen át. (vagy nagyítsa ki) az old alt.
A metacímkével kapcsolatos összes lehetőség részletesebb ismertetéséhez tekintse meg ezt a cikket a tutsplus.com oldalon.
Hogyan javítsuk ki a WordPress X témát, ha az nem reagál
Vissza az előző barátomhoz: Ez az egy sor kód eltűnt, amikor frissítette az X témát. Amikor kijavítja a sajátját, ne feledje, hogy az X téma nem csak egy fejlécfájlt használ – minden veremhez más-más fejlécfájlt használ, így Önnek szerkesztenie kell a sajátját.
Mivel Nick az Ethos stack of X témát használja, hozzá kellett adnia a korábban említett kódsort a fejlécfájlhoz, amely az x /frameworks/views/ethos/wp-header fájlban található.php . Ha másik veremet használ, a megfelelő fejlécfájl megtalálásához helyettesítse be a verem nevét (Integrity, Renew stb.) az „ethos” szóval. Szúrd be azt az egy sort, és íme! Jól indulsz.
Tehát ez a CSS-médialekérdezéseimet is javítja?
Amikor beszúrja ezt a sort a HTML-fájl fejlécébe, a reszponzív @media lekérdezései hirtelen újra működni kezdenek, és webhelyének mobil verziója újra életre kel. Köszönöm, hogy elolvasta, és remélem segít!
Ne felejtsd el Payette Forwardot, David P.
