Ett responsivt webbdesign är avgörande eftersom allt fler användare använder mobila enheter för att komma åt internet. För att säkerställa att din webbplats visas korrekt på olika skärmstorlekar och upplösningar erbjuder Chrome Developer Tools ett kraftfullt sätt att testa det responsiva designen. I denna handledning visar jag dig hur du aktiverar den mobila vyn och kan simulera olika enhetsstorlekar för att kontrollera anpassningen av din webbplats.
Viktigaste insikter
- Du kan aktivera den mobila vyn via DevTools för att testa layouten på din sida på olika enheter.
- Det är användbart att välja specifika enheter med deras standardupplösningar och skärmförhållanden.
- Funktioner som touch-simulering och pinch-to-zoom är också användbara för att emulera användarupplevelsen av mobila enheter.
Steg-för-steg-guide
För att använda den mobila vyn i Chrome Developer Tools, följ dessa enkla steg:
1. Aktivera den mobila vyn
För att aktivera den mobila vyn, öppna Chrome Developer Tools. Detta kan du antingen göra via menyn eller med en tangentkombination. Klicka på knappen "Toggle Device Toolbar" eller använd genvägstangenterna Command + Shift + M (macOS) eller Control + Shift + M (Windows).
När den mobila vyn är aktiverad kommer webbplatsen att växlas till en mobil vy. Nu kan du se hur sidan ser ut på en mobil enhet.
2. Välj och anpassa enhetsstorleken
Överst i DevTools finns en rullgardinsmeny där du kan välja dimensionerna för skärmen. Som standard är alternativet inställt på "Responsive". Du kan ändra detta för att manuellt anpassa upplösningen och storleken. Om du letar efter en specifik enhetsstorlek, klicka på listan och välj till exempel iPhone 12 Pro eller Pixel 7 från listan.
DevTools visar nu upplösningen som den valda enheten faktiskt har. Observera att den effektiva upplösningen som webbläsaren använder kan skilja sig från enhetens naturliga upplösning.
3. Förståelse för Device Pixel Ratio
En viktig aspekt vid testning är "Device Pixel Ratio". Du kan ändra Device Pixel Ratio genom att öppna trepunktsmenyn och ändra värdena. Device Pixel Ratio beskriver förhållandet mellan fysiska pixlar och de pixlar som webbläsaren använder.
För iPhone 12 Pro är ratio exempelvis 3:1. Det innebär att tre fysiska pixlar representerar en enhet i webbläsaren. Den naturliga upplösningen är mycket högre för att säkerställa att bilder och texter visas skarpt och tydligt.
4. Anpassa layouten och vyn
Eftersom du nu kan testa den mobila vyn med den valda enheten kommer du att upptäcka att du även kan anpassa dimensionerna. Klicka och dra i hörnen eller sidorna av vynsytan för att prova olika bredder och höjder.
Dessutom kan du ändra inriktningen, till exempel från stående (Portrait) till liggande (Landscape), för att se hur layouten beter sig under olika förhållanden.
5. Simulera pekingångar
En annan anmärkningsvärt funktion är möjligheten att simulera tryckgestar. När du aktiverar muspekaren ersätts den med en fingerpekare. Detta gör det möjligt för dig att simulera hur användare interagerar på en mobil webbplats genom att scrolla eller navigera genom menyer.
För att utföra en Pinch-to-Zoom-gest, håll Shift-tangenten nedtryckt och dra med musen. Detta emulerar gesten som användare skulle använda på en verklig enhet.
6. Testa sidans laddningstid
För att testa webbplatsens laddningshastighet kan du använda throttlingsfunktionen. Denna funktion gör det möjligt för dig att ändra datakommunikationshastigheten för att simulera hur din webbplats fungerar under dåliga nätverksförhållanden.
Ändra throttlingsinställningarna till "Low-End Mobile" eller "Ingen throttlings" för att jämföra effekterna. Du kommer att märka att webbplatsen laddar olika snabbt, vilket hjälper dig att testa användarupplevelsen på långsamma anslutningar.
7. Skapa skärmdumpar
Om du behöver en ögonblicksbild av din simulering av mobildisplayen kan du enkelt ta en skärmdump direkt från DevTools. Klicka på det relevanta alternativet i verktygsfältet för att automatiskt ladda ner skärmdumpen.
8. Återställ till standardvärden
Om du vill återställa inställningarna för mobildisplayen kan du också göra detta i DevTools. Klicka på knappen för att återställa alla modifieringar till standardvärdena.
På detta sätt kan du snabbt utföra en ny test med standardinställningarna för enheten.
Sammanfattning
I den här guiden har du lärt dig hur du aktiverar och konfigurerar mobildisplayen i Chrome Developer Tools. Du kan simulera olika enheter, justera enhetens pixelratio, testa touch-gester och kontrollera webbplatsens laddningshastighet. Förståelsen och korrekt tillämpning av dessa funktioner hjälper dig effektivt optimera din webbplats responsiva design.
Vanliga frågor
Hur aktiverar jag mobildisplayen i Chrome Developer Tools?Du kan aktivera mobildisplayen genom att öppna utvecklarverktygen och klicka på knappen "Växla enhetsverktygsfält" eller använda tangentkombinationen Kommando + Skift + M (macOS) eller Kontroll + Skift + M (Windows).
Kan jag lägga till egna enhetsstorlekar?Ja, du kan skapa egna enhetsstorlekar och enheter i DevTools för att utföra specifika tester.
Vad är enhetens pixelratio?Enhetens pixelratio är förhållandet mellan en skärms fysiska pixlar och antalet pixlar som webbläsaren visar.
Hur kan jag simulera touch-gester?För att simulera touch-gester, byt ut muspekaren mot en fingerpekare genom att ändra vyn till touchskärmsläget och dra musen i Skift-läget.
Hur testar jag webbplatsens laddningshastighet i mobila vyer?Du kan använda throttlingsfunktionen i DevTools för att simulera datakommunikationshastigheten och se hur din webbplats fungerar under olika nätverksförhållanden.
