Reaguojantis dizainas yra būtinas, nes vis daugiau vartotojų naudoja mobiliuosius įrenginius, kad pasiektų internetą. Užtikrinti, kad jūsų svetainė būtų teisingai rodoma skirtinguose ekrano dydžiuose ir raiškose, Chrome kūrėjų įrankiai suteikia galingą būdą patikrinti reaguojantį dizainą. Šiame vadove parodysiu, kaip įjungti mobiliąją peržiūrą ir simuliuoti skirtingus įrenginių dydžius siekiant patikrinti jūsų svetainės prisitaikymą.
Svarbiausi atradimai
- Galite aktyvuoti mobiliąją peržiūrą per „DevTools“, kad patikrintumėte savo puslapio išdėstymą skirtinguose įrenginiuose.
- Naudinga pasirinkti specifinius įrenginius su jų standartinėmis raiškomis ir ekrano santykiu.
- Funkcijos, tokios kaip liečiamųjų įvesties emuliavimas ir priartinti gestu, taip pat yra naudingos, norint emuliuoti mobiliojo įrenginio vartotojo patirtį.
Žingsnis po žingsnio vadovas
Norėdami naudotis „Chrome kūrėjo įrankių“ mobilia peržiūra, laikykitės šių paprastų žingsnių:
1. Mobilaus ryšio peržiūros aktyvavimas
Norėdami įjungti mobilaus ryšio peržiūrą, atidarykite „Chrome kūrėjo įrankius“. Tai galite padaryti per meniu arba naudodami tam tikrą klavišų kombinaciją. Spustelėkite „Įjungti įrenginio įrankių juostą“ mygtuką arba naudokite sutrumpinimo klavišus: Command + Shift + M (macOS) arba Control + Shift + M (Windows).
<!- /wp:paragraph --> <!- wp:heading {"level":3} -->
2. Įrenginio dydžio pasirinkimas ir pritaikymas
!- /wp:heading --> <!- wp:paragraph -->
Viršutinėje „DevTools“ juostoje yra išskleidžiamasis meniu, kuriame galite pasirinkti įrenginio ekraną. Numatytoji parinktis yra „Reaguojantis“ režimas. Galite pakeisti šią parinktį, kad rankiniu būdu pritaikytumėte raišką ir dydį. Jei ieškote tam tikro įrenginio ekrano dydžio, spustelėkite sąrašą ir pasirinkite, pavyzdžiui, „iPhone 12 Pro“ arba „Pixel 7“ iš sąrašo.
!- /wp:paragraph -->
<!- wp:image {"sizeSlug":"large"} -->
„DevTools“ dabar rodo raišką pagal pasirinktą įrenginį. Atminkite, kad naršytojas gali naudoti efektyvų raišką, kuri gali skirtis nuo įrenginio natyvios raiškos.
!- /wp:paragraph --> <!- wp:heading {"level":3} -->
3. Įrenginio taškų santykio supratimas
!- /wp:heading --> <!- wp:paragraph -->
Svarbus aspektas patikrinant yra „Įrenginio taškų santykis“. Galite pakeisti įrenginio taškų santykį, atidarius trijų taškų meniu ir pakeitus atitinkamus parametrus. „Įrenginio taškų santykis“ aprašo fizinių taškų santykį su naršytojo naudojamais taškais.
!- /wp:paragraph -->
<!- wp:image {"sizeSlug":"large"} -->
Pavyzdžiui, „iPhone 12 Pro“ atveju santykis yra 3:1. Tai reiškia, kad trys fizinės taškai yra vienetas naršyklėje. Natyvioji raiška yra žymiai didesnė, kad paveikslai ir tekstai atrodytų aiškiai ir aiškiai.
!- /wp:paragraph --> <!- wp:heading {"level":3} -->
4. Išdėstymo ir peržiūros pritaikymas
!- /wp:heading --> <!- wp:paragraph -->
<!- /wp:paragraph -->
<!- wp:image {"sizeSlug":"large"} -->
<!- /wp:paragraph --> <!- wp:heading {"level":3} -->
5. Liečiamų įvesties imitavimas
!- /wp:heading --> <!- wp:paragraph -->
Kitas pastebimas funkcionalumas yra galimybė imituoti liečiamus judesius. Įjungus pelės pointerį, jis pakeičiamas piršto rodykle. Tai leidžia jums imituoti mobiliosios svetainės vartotojų sąveiką, slinkdami arba naršydami meniu.
!- /wp:paragraph -->
<!- wp:image {"sizeSlug":"large"} -->
<!- /wp:paragraph --> <!- wp:heading {"level":3} -->
6. Puslapio kraunamųjų greičių patikrinimas
!- /wp:heading -->
Norėdami išbandyti tinklapio įkrovimo greitį, galite naudoti ribojimo funkciją. Ši funkcija leidžia keisti duomenų komunikacijos greitį, norint simuliuoti, kaip jūsų tinklalapis veikia prastomis tinklo sąlygomis.
Pakeiskite ribojimo nustatymus į "Nedidelis mobilaus įrenginio lygis" arba "Be ribojimo", kad galėtumėte palyginti efektus. Pastebėsite, kad tinklalapis įsikrauna skirtingai greitai, kas jums padės išbandyti vartotojų patirtį lėtomose ryšio sąlygose.
7. Ekrano vaizdų kūrimas
Jei jums reikia mobilaus peržiūros momentinės nuotraukos, galite lengvai įrėžti ekrano vaizdą tiesiogiai iš DevTools. Spustelėkite atitinkamą parinktį įrankių juostoje, kad ekrano vaizdas būtų automatiškai atsisiųstas.
8. Atkūrimo į standartinius nustatymus
Jei norite atstatyti mobilaus peržiūros nustatymus į pradinę būseną, tai taip pat galite padaryti per DevTools. Spustelėkite mygtuką, kad visi modifikacijos būtų atstatytos į standartinių nustatymų reikšmes.
Taip greitai galite atlikti naują testą naudodamiesi standartinių įrenginių nustatymais.
Santrauka
Šiame vadove išmokote, kaip aktyvuoti ir konfigūruoti mobilaus peržiūros funkcijas „Chrome Developer Tools“. Galite simuliuoti įvairius įrenginius, prisitaikyti prie įrenginio taško santykio, išbandyti lietimo gestus ir išbandyti savo tinklapio įkrovimo greitį. Šių funkcijų supratimas ir tinkama taikymas padės jums efektyviai optimizuoti savo tinklapio reagavimo dizainą.
Daugiausiai užduodamų klausimų
Kaip įjungti mobiliąją peržiūrą „Chrome Developer Tools“?Galite įjungti mobiliąją peržiūrą atverdami kūrėjo įrankius ir spustelėdami „Išjungti įrenginio įrankių juostą“ mygtuką arba naudodami „MacOS“ klavišų kombinaciją: „Command + Shift + M“, arba „Windows“ atveju „Control + Shift + M“.
Ar galiu pridėti savo įrenginių dydžius?Taip, galite sukurti savo įrenginių dydžius ir įrenginius „DevTools“, kad galėtumėte atlikti konkretų testą.
Kas yra įrenginio taško santykis?Įrenginio taško santykis – tai fizinės ekrano pikselių santykis su naršyklės rodomu pikselių skaičiumi.
Kaip galima simuliuoti lietimo gestus?Norėdami simuliuoti lietimo gestus, pakeiskite pelės žymeklį į piršto žymeklį, pakeisdami vaizdą į liečiamąjį ekraną ir pelės padėtį perslinkdami „Shift“ režimu.
Kaip išbandyti savo tinklapio įkrovimo greitį mobilioje peržiūroje?„DevTools“ galite naudoti ribojimo funkciją, kad simuliavę duomenų komunikacijos greitį galėtumėte pamatyti, kaip jūsų tinklalapis veikia skirtingomis tinklo sąlygomis.
