Test responsiv design med Chrome Developer-verktøy

Et responsivt webdesign er uunnværlig da stadig flere brukere tilgår internett med mobile enheter. For å sikre at nettsiden din vises korrekt på ulike skjermstørrelser og oppløsninger, gir Chrome Developer Tools en kraftig måte å teste det responsive designet på. I denne veiledningen viser jeg deg hvordan du aktiverer mobilvisningen og kan simulere ulike enhetsstørrelser for å sjekke tilpasningsevnen til nettsiden din.

Viktigste innsikter

• Du kan aktivere mobilvisningen gjennom DevTools for å teste layoutet på siden din på ulike enheter.
• Det er nyttig å velge spesifikke enheter med deres standardoppløsninger og skjermforhold.
• Funksjonaliteter som Touch-simulering og Pinch-to-Zoom er også nyttige for å etterligne brukeropplevelsen på mobile enheter.

Trinn-for-trinn-veiledning

For å bruke mobilvisningen i Chrome Developer Tools, følg disse enkle trinnene:

1. Aktivere mobilvisningen

For å aktivere mobilvisningen, åpne Chrome Developer Tools. Dette kan du enten gjøre via menyen eller ved hjelp av hurtigtaster. Klikk på "Toggle Device Toolbar"-knappen eller bruk snarveiene Command + Shift + M (macOS) eller Kontroll + Shift + M (Windows).

Når du har aktivert mobilvisningen, vil nettsiden skifte til en mobilvisning. Nå kan du se hvordan siden ser ut på en mobil enhet.

2. Velge og tilpasse enhetsstørrelse

I den øverste verktøylinjen i DevTools finner du en rullegardinmeny der du kan velge dimensjonene på skjermen. Som standard er alternativet satt til "Responsive." Du kan endre denne innstillingen for å manuelt tilpasse oppløsningen og størrelsen. Hvis du ser etter en bestemt enhetsstørrelse, klikk på listen og velg for eksempel iPhone 12 Pro eller Pixel 7 fra listen.

DevTools viser nå oppløsningen som den valgte enheten faktisk har. Merk at den effektive oppløsningen som nettleseren bruker, kan avvike fra enhetens naturlige oppløsning.

3. Forståelse av enhetspikselratioen

En viktig faktor å teste er "Device Pixel Ratio." Du kan endre Device Pixel Ratio ved å åpne rullegardinmenyen og endre de relevante verdiene. Device Pixel Ratio beskriver forholdet mellom fysiske piksler og piksler som nettleseren bruker.

For iPhone 12 Pro er for eksempel forholdet 3:1. Dette betyr at tre fysiske piksler tilsvarer én enhet i nettleseren. Den naturlige oppløsningen er mye høyere for å sikre at bilder og tekster vises skarpt og tydelig.

4. Tilpasse layout og visning

Nå som du kan teste mobilvisningen med den valgte enheten, vil du oppdage at du også kan tilpasse dimensjonene. Klikk og dra hjørnene eller sidene på visningsområdet for å prøve ut ulike bredde- og høydeverdier.

Du kan også endre orienteringen, for eksempel fra portrett til landskap, for å se hvordan layouten oppfører seg under ulike forhold.

5. Simulering av berøringsinndata

En annen bemerkelsesverdig funksjon er muligheten til å simulere berøringsbevegelser. Når du aktiverer musepekeren, vil den byttes ut med en fingerpeker. Dette gjør det mulig for deg å simulere hvordan brukere interagerer på en mobil nettside ved å bla eller navigere gjennom menyer.

For å utføre en Pinch-to-Zoom-bevegelse, trykk og hold Shift-tasten inne mens du drar med musen. Dette etterligner bevegelsen brukere ville gjort på en ekte enhet.

6. Test av sideinnlastingshastighet

For å teste lastehastigheten på nettsiden, kan du bruke throttling-funksjonen. Denne funksjonen lar deg endre datakommunikasjonshastigheten for å simulere hvordan nettsiden din fungerer under dårlige nettverksforhold.

Endre throttling-innstillingene til "Low-End Mobile" eller "No Throttling" for å sammenligne effektene. Du vil legge merke til at nettsiden laster seg ulikt raskt, noe som hjelper deg med å teste brukeropplevelsen på tregere tilkoblinger.

7. Opprettelse av skjermbilder

Hvis du trenger et øyeblikksbilde av den simulerte mobile visningen din, kan du enkelt ta et skjermbilde direkte fra DevTools. Klikk på alternativet i verktøylinjen for å laste ned skjermbildet automatisk.

8. Tilbakestill til standardverdier

Hvis du ønsker å tilbakestille innstillingene for den mobile visningen, kan du også gjøre det i DevTools. Klikk på knappen for å tilbakestille alle endringer til standardverdiene.

På denne måten kan du raskt gjøre en ny test med standard enhetsinnstillinger.

Sammendrag

I denne veiledningen har du lært å aktivere og konfigurere den mobile visningen av Chrome Developer Tools. Du kan simulere ulike enheter, justere enhetens pikselratio, prøve ut berøringsbevegelser og teste nettsidens lastehastighet. Forståelsen og riktig anvendelse av disse funksjonene vil hjelpe deg med å optimalisere det responsive designet på nettsiden din effektivt.