Egy barátom nemrég kereste meg, hogy segítséget kérjen egy WordPress-webhelyhez, amelyet az X téma segítségével épített fel. Ügyfele aznap reggel felhívta, miután észrevette, hogy a weboldala nem megfelelően jelenik meg az iPhone készülékén. Nick maga is megnézte, és bizony, az általa tervezett szép érzékeny kialakítás már nem működött.
Tovább misztifikálta, hogy amikor átméretezte a böngészőablakot az asztalon, a webhelyen volt érzékeny, de iPhone-ján csak az asztali verzió volt látható. Miért lenne egy oldal reagál egy asztali számítógépen és nem reagál mobileszközön?
Miért nem működik az adaptív tervezés?
Az adaptív tervezés leáll, ha egy kódsor hiányzik a HTML-fájl fejlécéből. Ha ez az egyetlen kódsor hiányzik, az iPhone, Android és más mobileszközök feltételezik, hogy a megtekintett webhely teljes méretű asztali webhely, és beállítja a nézetablak hogy átfogja a teljes képernyőt.
Mit értesz nézet és nézet méretén?
Minden eszközön a nézetablak mérete a weboldalnak a 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-et tart. Hacsak kifejezetten másként nem mondják el, az iPhone készülékek azt feltételezik, hogy minden meglátogatott webhely 980 képpontos szélességű asztali webhely.
Most, a képzeletbeli iPhone 5 segítségével,meglátogat egy asztali használatra tervezett weboldalt, amelynek szélessége 800 képpont. Nincs érzékeny elrendezése, ezért az iPhone megjeleníti a teljes szélességű asztali verziót.
dokumentumokat és adatokat tölt fel az icloudba
De az iPhone 5 csak 320 pixel széles. Nem mindig akkora a nézet?
Nem ez nem. Nézetablak méretével méretarány is bevonható . Az iPhone-nak le kell kicsinyítenie a weboldal teljes szélességű változatának megtekintéséhez. Ne feledje, hogy a nézetablak az oldal azon területére vonatkozik, amely jelenleg a felhasználó számára látható. Az iPhone felhasználó jelenleg csak 320 pixelt lát az oldalból, vagy a teljes szélességű verziót látja?
Így van: Teljes szélességű weboldalt látnak a kijelzőn, mert az iPhone feltételezte, hogy ez az alapértelmezett viselkedés: Kicsinyítve van, hogy a felhasználó 980 pixel szélességig megtekinthessen egy weboldalt. Ezért az iPhone nézetablaka 980 képpontos.
A nagyítás vagy kicsinyítés közben a nézetablak mérete megváltozik. Korábban azt mondtuk, hogy képzeletbeli weboldalunk szélessége 800 képpont, tehát ha nagyítaná az iPhone készülékét úgy, hogy a webhely szélei hozzáérjenek az iPhone kijelzőjének széléhez, akkor a nézetablak 800 képpontos lenne. Az iPhone tud 320px nézetablakkal rendelkezik egy asztali webhelyen, de ha mégis, akkor annak csak egy kis részét látja.
miért mennek a hívások egyenesen a hangpostafiókba
Az érzékeny webhelyem megszakadt. Hogyan lehet kijavítani?
A válasz egyetlen HTML sor, amely a weboldal fejlécébe illesztve azt mondja az eszköznek, hogy állítsa a nézetablakot a saját szélességére (iPhone 5 esetén 320 képpont), és ne méretezze (vagy nagyítsa) az oldalt.
Tekintse meg a metacímkével kapcsolatos összes opció technikai jellegű megvitatását ez a cikk a tutsplus.com oldalon .
Hogyan lehet kijavítani a WordPress X témát, ha az nem reagál
Vissza a korábbi barátomhoz: Ez az egy kódsor eltűnt, amikor frissítette az X témát. A javításkor ne feledje, hogy az X téma nem csak egy fejlécfájlt használ - minden fejléchez más fejlécfájlokat használ, ezért szerkesztenie kell a sajátját.
Az iphone 6 hívások egyenesen a hangpostára irányulnak
Mivel Nick az Ethos stack of X témát használja, hozzá kellett adnia az általam korábban említett kódsort az x-ben található fejlécfájlhoz /frameworks/views/ethos/wp-header.php . Ha más köteget használ, cserélje le a verem nevét (Integrity, Renew stb.) Az „ethos” kifejezésre a megfelelő fejlécfájl megtalálásához. Helyezze be azt az egy sort, és voila! Jól vagy menni.
Tehát ez kijavítja a CSS média lekérdezéseimet is?
Amikor beilleszti ezt a sort a HTML-fájl fejlécébe, az @ @ media válaszadó lekérdezései hirtelen újra működni kezdenek, és webhelyének mobil verziója újra életre kel. Köszönöm, hogy elolvastad, és remélem, hogy segít!
Ne felejtsd el, hogy Payette Forward,
David P.