Veebisaidi eelvaate kuvamine erinevates seadmetes Google Chrome'i abil

Kui loote veebisaiti, soovite, et see oleks tundlik ja kohaneks erinevate ekraanisuurustega. Üks võimalus seda testida on Google Chrome'i sisseehitatud arendajatööriistade kasutamine.

Chrome'i DevTools võimaldab teil siluda oma veebisaidi erinevaid aspekte. See hõlmab HTML-i lähtekoodi ja CSS-i muutmist ja eelvaate vaatamist. See võimaldab teil ka siluda kliendipoolset JavaScripti koodi ja vaadata võrguliiklust.

DevToolsil on ka võimalus vaadata oma veebisaiti erinevates seadmetes. See hõlmab erinevat tüüpi mobiilseadmeid, iPade, tahvelarvuteid ja palju muud.

Seadme tööriistariba avamiseks Google Chrome'is peate avama Chrome'i arendaja tööriistade aken:

1. Avage veebisait.
2. Paremklõpsake lehel ja klõpsake nuppu Kontrollige.
3. Avaneb Chrome DevToolsi aken. See võib avaneda teie brauseri küljele või alla või uue aknana.
4. Akna vasakus ülanurgas on kaks ikooni. Klõpsake ikoonil, mis näitab mitut erineva suurusega seadet.
5. Ekraan muutub ja näitab, kuidas veebisait mobiilseadmes välja näeks.

Kuidas lülituda erinevate seadmete vahel

Erinevate seadmete vahel vahetamiseks kasutage seadme tööriistariba ülaosas olevat rippmenüüd.

1. Tööriistariba ülaosas kuvatakse, mis tüüpi seadmes te praegu oma veebisaiti vaatate. Loendist teise seadme valimiseks klõpsake rippmenüül.
2. Olemasoleva seadme valimise asemel saate vaadata veebisaiti reageerivas režiimis. Klõpsake rippmenüül ja valige Vastutulelik valik.
3. Rippmenüü kõrval saate sisestada ka seadme kohandatud laiuse ja kõrguse.
4. Laiuse ja kõrguse sisestamise asemel saate suuruse reguleerimiseks klõpsata ja lohistada akna nurki.

Kuidas lisada kohandatud seadet

Kui soovite salvestada kohandatud laiuse ja kõrguse, saate lisada kohandatud seadme. Seadme tööriistariba kuvab seejärel teie uue seadme seadmete rippmenüüs.

1. Klõpsake ripploendil, kus on loetletud kõik seadmed.
2. Kliki Muuda.
3. Veenduge, et seadete külgribal oleks Seadmed vahekaart valitud. Siin saate vaadata ka muude seadmete loendit, mille hulgast saate valida.
4. Kliki Lisa kohandatud seade.
5. Sisestage seadme nimi, laius ja kõrgus. Valige kindlasti ka seadme tüüp, näiteks kas tegemist on mobiil- või lauaseadmega. Kui laiendate Kasutajaagendi kliendi vihjed saate lisada muid üksikasju, nagu seadme mudel, kaubamärk või versioon.
6. Kliki Lisama.
7. Minge tagasi rippmenüüsse, kus on loetletud kõik seadmed. Näete loendis oma uut kohandatud seadet.
8. Saate neid üksikasju hiljem uuesti muuta, minnes tagasi kohandatud seadme lehele. Klõpsake nuppu muuda muutmise alustamiseks oma seadme nime kõrval olevat nuppu.

Veebisaidi eelvaate kuvamine erinevates seadmetes ja ekraanisuuruses on mitmel põhjusel väga kasulik.

Esiteks saate testida oma veebisaidi toimivust erinevates seadmetes. Mõnel mobiiltelefonil võib olla suurem võrgukiirus või protsessori piiramine kui teistel.

Seadme tööriistariba võimaldab teil lülituda erinevate võrgukiiruse valikute vahel. See võimaldab teil testida mis tahes serverikõnede kiirust või testida andmete laadimist ja renderdamist teie veebisaidil.

Lisaks saate kasutajaliidese vaatenurgast vaadata, kuidas konkreetse seadme disain välja näeb. Kui kasutate CSS-i meediumipäringud, saate selle tööriista abil kontrollida, kas need töötavad ootuspäraselt.

Saate kasutada Google Chrome'i DevToolsi akent, et testida, kuidas teie veebisait kohandub erinevate ekraanisuurustega, ja veenduda, et teie veebisait on tundlik. Saate seda kasutada ka oma veebisaidi toimivuse testimiseks ja selle, kas teie meediapäringud toimivad ootuspäraselt.

Google Chrome'i DevToolsi saate kasutada ka muudel eesmärkidel. Saate seda kasutada mis tahes CSS-i probleemide silumiseks, muutes CSS-i elemendi akna vahekaardil Stiilid. See võimaldab teil kohe näha kõiki CSS-i muudatusi, mis võib teie kodeerimise töövoogu kiirendada.

Kuidas kasutada Google Chrome'i CSS-i silumiseks

Loe edasi