Reageeriv veebidisain on hädavajalik, kuna üha enam kasutajaid kasutab Internetiühendust mobiilsete seadmetega. Tagamaks, et sinu veebisait kuvatakse erinevatel ekraanisuurustel ja -lahutustel korrektselt, pakuvad Chrome'i arendajate tööriistad võimsat võimalust reageeriva disaini testimiseks. Selles juhendis näitan sulle, kuidas aktiveerida mobiilvaade ja simuleerida erinevaid seadmesuurusi, et kontrollida oma veebisaidi kohanemisvõimet.
Olulisemad järeldused
- Võid mobiilvaate avada DevTools'ite kaudu, et testida oma lehe paigutust erinevatel seadmetel.
- On abiks valida spetsiifilised seadmed koos nende tavapäraste lahutuste ja ekraani kuvasuhtega.
- Funktsioonid nagu puutetundlikkuse simulatsioon ja sisse/välja nihutamine on samuti kasulikud, et emuleerida mobiilsete seadmete kasutajakogemust.
Samm-sammuline juhend
Mobiilvaate kasutamiseks Chrome'i arendajate tööriistades järgi neid lihtsaid samme:
1. Mobiilvaate aktiveerimine
Mobiilvaate aktiveerimiseks ava Chrome'i arendajate tööriistad. Seda saad teha kas menüü kaudu või klaviatuuri otseteed kasutades. Vajuta "Toggle Device Toolbar" nupule või kasuta otseteid Command + Shift + M (macOS) või Control + Shift + M (Windows).
Kui oled mobiilvaate aktiveerinud, lülitub veebisait mobiilvaatesse. Nüüd näed, kuidas leht mobiilseadmel välja näeb.
2. Seadme suuruse valimine ja kohandamine
DevTools'ite ülemises ribas on rippmenüü, kus saad valida ekraani mõõtmed. Vaikimisi on valik "Responsive". Saad seda seadistust muuta, et käsitsi määrata resolutsioon ja suurus. Kui otsid konkreetset seadme suurust, kliki loendis ja vali näiteks iPhone 12 Pro või Pixel 7.
DevTools'id näitavad nüüd valitud seadme tegelikku resolutsiooni. Pane tähele, et tegelik resolutsioon, mida brauser kasutab, võib erineda seadme vaikimisi resolutsioonist.
3. Seadme pikslisuhete mõistmine
Oluline aspekt testimisel on "Seadme Pikslisuhe". Pikslisuhte saad muuta, klikates kolmepunktimenüül ja muutes vastavad väärtused. Pikslisuhe kirjeldab füüsiliste pikslite suhet pikslite arvu suhtes, mida brauser kasutab.
Näiteks iPhone 12 Pro puhul on suhe 3:1. See tähendab, et kolm füüsilist pikslit esindavad ühte ühikut brauseris. Natiivne resolutsioon on oluliselt suurem, et tagada piltide ja tekstide teravus ja selgus.
4. Paigutuse ja vaate kohandamine
Nüüd, kui saad mobiilivaadet testida valitud seadmega, märkad, et saad ka mõõtmeid muuta. Vajuta ja lohista vaateala nurki või servi, et proovida erinevaid laiuseid ja kõrgusi.
Lisaks saad muuta suunamist, näiteks portreerežiimist (Portrait) maastikurežiimi (Landscape), et näha, kuidas paigutus erinevates tingimustes toimib.
5. Puutetundlikkuse simulatsioon
Veel üks silmapaistev funktsioon on võimalus simuleerida puudutusžeste. Kui aktiveerid kursori, asendatakse see sõrmega. See võimaldab sul simuleerida, kuidas kasutajad mobiilsaidil interakteeruvad, kerides või navigeerides menüüdes.
Kahe sõrmega suumimise žesti emuleerimiseks hoia all Shift klahvi ja lohista hiirega. See emuleerib žesti, mida kasutajad reaalsel seadmel kasutaksid.
6. Lehe laadimiskiiruse testimine
Laadimiskiiruse testimiseks veebisaidil saate kasutada aeglustusfunktsiooni. See võimaldab teil muuta andmeside kiirust, et simuleerida, kuidas teie veebisait toimib halbades võrgutingimustes.
Modifitseeri aeglustusseadeid valikule "Madalama klassi mobiil" või "Aeglustuseta", et võrrelda mõjusid. Märkad, et veebisait laadib erineva kiirusega, mis aitab teil testida kasutajakogemust aeglastel ühendustel.
7. Ekraanipiltide tegemine
Kui vajad hetktõmmist simuleeritud mobiilivaatest, saad otse DevTools'ist lihtsalt teha ekraanipildi. Klõpsa tööriistaribal asuvale vastavale valikule, et allalaadimine käiks automaatselt.
8. Lähtestamine vaikesätetele
Kui soovid mobiilivaate seaded taastada vaikeseadetele, saad seda teha samuti DevTools'is. Klõpsa nupule, et kõik muudatused taastada vaikesäteteks.
Nii saad kiiresti teha uue testi vaikeseadete abil.
Kokkuvõte
Selles juhendis õppisid, kuidas aktiveerida ja konfigureerida mobiilivaadet Chrome'i arendaja tööriistades. Saad simuleerida erinevaid seadmeid, kohandada seadme pikslisuhet, proovida puutežeste ning testida oma lehe laadimiskiirust. Nende funktsioonide mõistmine ja õige rakendamine aitavad sul efektiivselt optimeerida oma veebisaidi reageerivat kujundust.
Sagedased küsimused
Kuidas aktiveerida mobiilivaade Chrome'i arendaja tööriistades?Saad mobiilivaate aktiveerida, avades arendaja tööriistad ja klõpsates "Toggle Device Toolbar" nupule või kasutades klahvikombinatsiooni Command + Shift + M (macOS) või Control + Shift + M (Windows).
Kas ma saan lisada oma seadmetele omi mõõtmeid?Jah, saad luua oma seadmetele omi mõõtmeid ja seadmeid DevTools'is, et teha konkreetseid teste.
Mis on seadme pikslisuhe?Seadme pikslisuhe on füüsiliste ekraanipikslite suhe brauseri kuvatavate pikslite arvu.
Kuidas saan simuleerida puutežeste?Puutežeste simuleerimiseks asenda hiirekursor sõrmekursoriga, muutes vaadet puutetundlikuks režiimiks ja lohistades hiirt Shift-režiimis.
Kuidas testida oma veebisaidi laadimiskiirust mobiilivaadetes?Võid kasutada aeglustusfunktsiooni DevTools'is, et simuleerida andmeside kiirust ja näha, kuidas su veebisait erinevates võrgutingimustes toimib.
