Üks mu sõber võttis hiljuti minuga ühendust, et küsida abi WordPressi saidi kohta, mille ta oli X-teema abil loonud. Tema klient helistas talle samal hommikul pärast seda, kui ta märkas, et tema veebisaiti ei kuvatud tema iPhone'is õigesti. Nick kontrollis seda ise ja kindlasti ei töötanud tema loodud ilus tundlik disain enam.
Teda müstiseeris veelgi asjaolu, et kui ta muutis oma brauseriakna suurust oma töölaual, saidil oli tundlik, kuid tema iPhone'is kuvati ainult töölaua versioon. Miks peaks sait olema tundlik lauaarvutis ja ei reageeri mobiilseadmes?
Miks tundlik disain ei toimi?
Reageeriv disain lakkab töötamast, kui HTML-faili päisest puudub üks koodirida. Kui see üks koodirida puudub, eeldavad teie iPhone, Android ja muud mobiilseadmed, et teie vaadatav veebisait on täissuuruses töölauasait, ja kohandab selle suurust vaateava et see hõlmaks kogu ekraani.
Mida mõtlete vaateava ja vaateava suuruse all?
Kõigis seadmetes viitab vaateava suurus kasutajale praegu nähtava veebilehe ala suurusele. Kujutage ette, et käes on iPhone 5, mille laius on 320 pikslit. Kui pole sõnaselgelt öeldud teisiti, eeldavad iPhone'id, et iga teie külastatav veebisait on töölauasait laiusega 980 pikslit.
Nüüd, kasutades oma kujuteldavat iPhone 5,külastate lauaarvutile mõeldud veebisaiti, mille laius on 800 pikslit. Sellel pole reageerivat paigutust, nii et teie iPhone kuvab täislaiusega töölauaversiooni.
iphone 8 pluss must ekraan
Kuid iPhone 5 laius on ainult 320 pikslit. Kas see pole alati vaateava suurus?
Ei see ei ole. Vaateakna suurusega skaleerimine võib olla kaasatud . Veebilehe täislaiuse versiooni nägemiseks peab iPhone suumima. Pidage meeles, et vaateava viitab lehe alale, mis on kasutajale praegu nähtav. Kas iPhone'i kasutaja näeb praegu lehest vaid 320 pikslit või näeb täislaiusega versiooni?
Täpselt nii: nad näevad oma ekraanil täislaiusega veebisaiti, kuna iPhone on eeldanud, et see on vaikekäitumine: see on suumitud, et kasutaja saaks vaadata kuni 980 pikslit laiet veebisaiti. Seetõttu on iPhone'i vaateava 980 pikslit.
Kui suurendate või vähendate, muutub vaateava suurus. Me ütlesime varem, et meie kujuteldava veebisaidi laius on 800 pikslit, nii et kui suumiksite oma iPhone'i nii, et veebisaidi servad puudutaksid teie iPhone'i ekraani servi, oleks vaateava 800 pikslit. IPhone saab teil on töölaua saidil 320px vaateaken, kuid kui see nii oleks, näeksite sellest vaid väikest osa.
minu iphone ütleb lihtsalt, et otsin
Minu tundlik veebisait on katki. Kuidas seda parandada?
Vastus on HTML-i üks rida, mis veebilehe päisesse sisestamisel käsib seadmel seadistada vaateava oma laiusele (iPhone 5 puhul 320 pikslit) ja mitte lehte mastaapida (või suumida).
Kõigi selle metasildiga seotud valikute tehnilisema arutelu saamiseks vaadake lehte see artikkel aadressil tutsplus.com .
Kuidas parandada WordPress X-i teemat, kui see pole reageeriv
Tagasi varasema sõbra juurde: see üks koodirida kadus, kui ta X-teemat värskendas. Oma parandamisel pidage meeles, et X-teema ei kasuta ainult ühte päisefaili - see kasutab iga virna jaoks erinevaid päisefaile, nii et peate oma oma redigeerima.
mu iphone ei libista avamiseks
Kuna Nick kasutab teemat Ethos stack, pidi ta X-is asuva päisefaili juurde lisama juba mainitud koodirea /frameworks/views/ethos/wp-header.php . Kui kasutate mõnda muud virna, asendage õige päisefaili leidmiseks ‘eetos’ oma virna nimi (Integrity, Renew jne). Sisestage see üks rida ja voila! Sul on hea minna.
Nii et see parandab ka minu CSS-i meediumipäringuid?
Kui sisestate selle rea oma HTML-faili päisesse, hakkavad teie reageerivad @media päringud äkki uuesti tööle ja teie veebisaidi mobiilne versioon ärkab taas ellu. Täname lugemast ja loodan, et see aitab!
Ärge unustage, et maksate edasi,
David P.