Kaip peržiūrėti savo svetainę skirtinguose įrenginiuose naudojant „Google Chrome“.

Kurdami svetainę norite, kad ji būtų jautri ir prisitaikytų prie skirtingų ekranų dydžių. Vienas iš būdų tai išbandyti yra naudoti „Google Chrome“ įtaisytuosius kūrėjo įrankius.

„Chrome“ kūrėjų įrankiai leidžia derinti įvairius svetainės aspektus. Tai apima HTML šaltinio kodo ir CSS keitimą ir peržiūrą. Tai taip pat leidžia derinti kliento JavaScript kodą ir peržiūrėti tinklo srautą.

„DevTools“ taip pat turi galimybę peržiūrėti svetainę skirtinguose įrenginiuose. Tai apima įvairių tipų mobiliuosius įrenginius, iPad, planšetinius kompiuterius ir kt.

Norėdami atidaryti įrenginio įrankių juostą „Google Chrome“, turite atidaryti „Chrome“ kūrėjo įrankių langas:

1. Atidarykite svetainę.
2. Dešiniuoju pelės mygtuku spustelėkite puslapį ir spustelėkite Apžiūrėti.
3. Atsidarys „Chrome DevTools“ langas. Jis gali būti atidarytas naršyklės šone, apačioje arba kaip naujas langas.
4. Viršutiniame kairiajame lango kampe yra dvi piktogramos. Spustelėkite piktogramą, kurioje rodomi keli skirtingo dydžio įrenginiai.
5. Ekranas pasikeis, kad parodytų, kaip svetainė atrodytų mobiliajame įrenginyje.

Kaip perjungti skirtingus įrenginius

Norėdami perjungti skirtingus įrenginius, naudokite įrenginio įrankių juostos viršuje esantį išskleidžiamąjį meniu.

1. Pačiame įrankių juostos viršuje bus rodoma, kokio tipo įrenginiu šiuo metu žiūrite savo svetainę. Spustelėkite išskleidžiamąjį meniu, kad pasirinktumėte kitą įrenginį iš sąrašo.
2. Užuot pasirinkę esamą įrenginį, galite pasirinkti peržiūrėti svetainę reaguojančiu režimu. Spustelėkite išskleidžiamąjį meniu ir pasirinkite Atsakingas variantas.
3. Šalia išskleidžiamojo meniu taip pat galite pasirinkti įvesti tinkintą įrenginio plotį ir aukštį.
4. Užuot įvedę plotį ir aukštį, taip pat galite spustelėti ir vilkti lango kampus, kad pakeistumėte dydį.

Kaip pridėti pasirinktinį įrenginį

Jei norite išsaugoti pasirinktinį plotį ir aukštį, galite pridėti pasirinktinį įrenginį. Tada įrenginio įrankių juostoje bus rodomas naujas įrenginys įrenginių išskleidžiamajame meniu.

1. Spustelėkite išskleidžiamąjį meniu, kuriame pateikiami visi įrenginiai.
2. Spustelėkite Redaguoti.
3. Nustatymų šoninėje juostoje įsitikinkite, kad turite Įrenginiai pasirinktas skirtukas. Čia taip pat galite peržiūrėti daugiau įrenginių, kuriuos galite pasirinkti, sąrašą.
4. Spustelėkite Pridėti pasirinktinį įrenginį.
5. Įveskite įrenginio pavadinimą, plotį ir aukštį. Taip pat būtinai pasirinkite įrenginio tipą, pvz., ar tai mobilusis, ar stalinis įrenginys. Jei išplėsti Vartotojo agento kliento užuominos parinktį, galite pridėti kitos informacijos, pvz., įrenginio modelį, prekės ženklą arba versiją.
6. Spustelėkite Papildyti.
7. Grįžkite į išskleidžiamąjį meniu, kuriame pateikiami visi įrenginiai. Sąraše matysite savo naują tinkintą įrenginį.
8. Vėliau galėsite dar kartą redaguoti šią informaciją grįžę į tinkinto įrenginio puslapį. Spustelėkite ant Redaguoti mygtuką, esantį šalia įrenginio pavadinimo, kad pradėtumėte redaguoti.

Dėl kelių priežasčių labai naudinga peržiūrėti savo svetainę skirtinguose įrenginiuose ir skirtingų dydžių ekranuose.

Pirma, galite išbandyti savo svetainės našumą skirtinguose įrenginiuose. Kai kurie mobilieji telefonai gali turėti didesnį tinklo greitį arba procesoriaus ribojimą nei kiti.

Įrenginio įrankių juosta leidžia perjungti skirtingas tinklo greičio parinktis. Tai leidžia išbandyti bet kokių skambučių į serverį greitį arba patikrinti duomenų įkėlimą ir pateikimą svetainėje.

Be to, vartotojo sąsajos požiūriu taip pat galite peržiūrėti, kaip dizainas atrodo konkrečiame įrenginyje. Jei naudojate CSS medijos užklausos, galite naudoti šį įrankį norėdami patikrinti, ar jie veikia taip, kaip tikitės.

Galite naudoti „Google Chrome“ kūrėjų įrankių langą, kad patikrintumėte, kaip jūsų svetainė prisitaiko prie skirtingų ekranų dydžių, ir įsitikinkite, kad svetainė reaguoja. Taip pat galite jį naudoti norėdami patikrinti savo svetainės našumą ir patikrinti, ar medijos užklausos veikia taip, kaip tikėtasi.

„Google Chrome“ kūrėjo įrankius taip pat galite naudoti kitais tikslais. Galite naudoti jį norėdami derinti bet kokias CSS problemas, pakeisdami CSS elemento lango skirtuke Stiliai. Tai leidžia iš karto peržiūrėti visus CSS pakeitimus, o tai gali pagreitinti kodavimo darbo eigą.

Kaip naudoti „Google Chrome“ CSS derinimui

Skaitykite toliau