Odzivno spletno oblikovanje je ključno, saj vedno več uporabnikov dostopa do interneta prek mobilnih naprav. Da se prepričate, da se vaša spletna stran pravilno prikaže na različnih velikostih zaslonov in ločljivostih, vam Chrome Developer Tools nudijo močno orodje za preizkus odzivnega oblikovanja. V tej navodilih vam bom pokazal/a, kako omogočiti mobilni pogled in simulirati različne velikosti naprav, da preverite prilagodljivost vaše spletne strani.
Najpomembnejši ugotovitvi
- Mobilni pogled lahko omogočite prek orodja za razvijalce, da preizkusite postavitev svoje strani na različnih napravah.
- Koristno je, da izberete določene naprave z njihovimi standardnimi ločljivostmi in razmerjem zaslona.
- Funkcije, kot so simulacija dotika in približevanje z dvojnim prstom, so prav tako koristne pri emuliranju uporabniške izkušnje na mobilnih napravah.
Korak za korakom vodič
Za uporabo mobilnega pogleda orodij za razvijalce Chroma, sledite tem preprostim korakom:
1. Omogočanje mobilnega pogleda
Za omogočanje mobilnega pogleda odprite orodja za razvijalce Chroma. To lahko naredite bodisi prek menija ali s tipkovno bližnjico. Kliknite gumb "Vklopi orodno vrstico naprave" ali uporabite bližnjice Command + Shift + M (macOS) oziroma Control + Shift + M (Windows).
Ko enkrat omogočite mobilni pogled, se bo spletno mesto preklopilo v mobilni pogled. Sedaj lahko vidite, kako se stran prikaže na mobilni napravi.
2. Izbor in prilagajanje velikosti naprav
V zgornji vrstici orodij za razvijalce je padajoči meni, kjer lahko izberete dimenzije zaslona. Privzeto je možnost "Odzivno" izbrana. To nastavitev lahko spremenite, da ročno prilagodite ločljivost in velikost. Če iščete določeno velikost naprave, kliknite na seznam in izberite na primer iPhone 12 Pro ali Pixel 7 iz seznama.
Orodja za razvijalce zdaj prikazujejo dejansko ločljivost, ki jo ima izbrana naprava. Upoštevajte, da se lahko učinkovita ločljivost, ki jo uporablja brskalnik, razlikuje od naravne ločljivosti naprave.
3. Razumevanje razmerja med piksli naprave
Pomemben vidik pri testiranju je "Razmerje med piki naprave". Razmerje med piki naprave lahko spremenite, če odprete meni s tremi pikami in spremenite ustrezne vrednosti. Razmerje med piki naprave opisuje razmerje med fizičnimi piki in piksli, ki jih brskalnik uporablja.
Za iPhone 12 Pro na primer razmerje znaša 3:1. To pomeni, da trije fizični piksli tvorijo enoto v brskalniku. Naravna ločljivost je veliko višja, da zagotovi, da so slike in besedilo ostra in jasna.
4. Prilagajanje postavitve in pogleda
Ker zdaj lahko testirate mobilni pogled s izbrano napravo, boste lahko opazili, da lahko prilagajate tudi dimenzije. Kliknite in povlecite vogale ali stranice območja pogleda, da preizkusite različne širine in višine.
Poleg tega lahko spremenite usmerjenost, na primer iz pokončnega (portret) v ležeči (pokrajina), da vidite, kako se postavitev obnaša pri različnih pogojih.
5. Simulacija dotikov
Druga opazna funkcija je možnost simuliranja preprostih dotikov. Ko vklopite kazalec miške, bo ta zamenjan z upodobitvijo prsta. To vam omogoča simulacijo, kako bi uporabniki na mobilni spletni strani interakcijo izvajali s pomikanjem ali navigacijo skozi menije.
Če želite izvesti približevanje z dvojnim prstom, pritisnite tipko Shift in povlecite z miško. To simulira gibanje, ki bi ga uporabniki uporabljali na pravi napravi.
6. Preizkus hitrosti nalaganja strani
Za preskus hitrosti nalaganja spletne strani lahko uporabite funkcijo zavore. Ta funkcija vam omogoča, da spremenite hitrost podatkovne komunikacije, da bi simulirali, kako vaša spletna stran deluje v slabih omrežnih pogojih.
Spremenite nastavitve zaviranja na "Nizka mobilna naprava" ali "Brez zaviranja", da primerjate učinke. Opazili boste, da se spletna stran nalaga različno hitro, kar vam pomaga preizkusiti uporabniško izkušnjo pri počasnih povezavah.
7. Ustvarjanje posnetkov zaslona
Če potrebujete posnetek svojega simuliranega mobilnega pogleda, lahko preprosto posnamete posnetek zaslona neposredno iz orodij za razvijalce. Kliknite ustrezno možnost v orodni vrstici, da se posnetek samodejno prenese.
8. Ponastavitev na privzete vrednosti
Če želite ponastaviti nastavitve mobilnega pogleda, to lahko storite tudi v orodjih za razvijalce. Kliknite gumb, da se vse spremembe ponastavijo na privzete vrednosti.
Na ta način lahko hitro izvedete nov test z uporabo privzetih nastavitev naprave.
Povzetek
V tej vadnici ste se naučili, kako omogočite in konfigurirate mobilni pogled v orodjih za razvijalce Chrome. Lahko simulirate različne naprave, prilagodite razmerje med napravo in piksli, preizkusite dotik, preverite hitrost nalaganja vaše strani. Razumevanje in pravilna uporaba teh funkcij vam bosta pomagali učinkovito optimizirati odzivno zasnovo vaše spletne strani.
Pogosto zastavljena vprašanja
Kako omogočim mobilni pogled v orodjih za razvijalce v Chrome-u?Mobilni pogled lahko omogočite tako, da odprete orodja za razvijalce in kliknete gumb "Stikalo za orodje za naprave" ali uporabite bližnjico na tipkovnici Command + Shift + M (macOS) ali Control + Shift + M (Windows).
Ali lahko dodam lastne velikosti naprav?Da, lahko dodate lastne velikosti naprav v orodjih za razvijalce, da izvedete specifične teste.
Kaj je razmerje med napravo in piksli?Razmerje med napravo in piksli predstavlja razmerje fizičnih pikslov na zaslonu in števila pikslov, ki jih brskalnik prikaže.
Kako simuliram dotik?Da bi simulirali dotik, zamenjajte kazalec miške z dotikom s preklopom pogleda na zaslon na način na dotik in premikom miške v načinu premika.
Kako testiram hitrost nalaganja svoje spletne strani v mobilnih pogledih?Uporabite funkcijo zaviranja v orodjih za razvijalce za simuliranje hitrosti podatkovne komunikacije in preverite, kako vaša spletna stran deluje v različnih omrežnih pogojih.
