Chrome's Device Mode-functie: emuleer snel mobiele apparaten
- Categorie: Google Chrome
Als webmaster moet u er niet alleen voor zorgen dat de juiste inhoud wordt weergegeven aan desktopgebruikers, maar ook dat mobiele gebruikers correct worden bediend.
Dit kan een groot probleem zijn, aangezien u niet alle mogelijke besturingssystemen, browsers en schermresoluties die deze apparaten gebruiken, kunt testen, althans niet zonder emulatie of enige softwarehulp.
Een van de dingen waar u zeker van wilt zijn, is dat de website goed wordt weergegeven, ongeacht de schermgrootte. Het zou goed moeten worden weergegeven voor bezoekers die op internet surfen met Apple's Iphone 5, met een Google Nexus-apparaat, een Windows Phone of een Amazon Kindle.
De apparaatmodus van Google Chrome, ook beschikbaar in Chromium, biedt u de tools om snel mobiele apparaten in de browser te emuleren.
De ene toepassing is om ervoor te zorgen dat het scherm goed wordt weergegeven op het apparaat, een andere om erachter te komen hoe goed de inhoud op het apparaat wordt afgeleverd.
Notitie : Releaseversies van Chrome missen mogelijk enkele apparaatmodus en emulatiefuncties. Deze functies zullen echter uiteindelijk beschikbaar komen.
Start de apparaatmodus
Om de apparaatmodus te starten, opent u eerst de Developer Tools. U kunt dit doen met de sneltoets Ctrl-Shift-i, of door op het Hamburger-pictogram te klikken en Meer tools> Developer Tools te selecteren in het contextmenu.
Hier moet u de apparaatmodusknop selecteren die u in de linkerbovenhoek naast het inspecteurpictogram vindt.
Als u klaar bent, wordt bovenaan een nieuw menu weergegeven en zult u zien dat linialen ook verticaal en horizontaal worden weergegeven.
U kunt het apparaatmenu bovenaan gebruiken om een bepaald apparaat te selecteren waarin u geïnteresseerd bent. Chrome past de pagina automatisch aan de resolutie aan (die u desgewenst kunt uitschakelen).
Naast opties om snel te schakelen tussen verschillende apparaten, worden een paar dozijn apparaten ondersteund, specifiek en generiek, het is verder mogelijk om netwerkbeperking in te schakelen om langzame verbindingen te emuleren, en om de user agent te wijzigen die automatisch wordt gewijzigd wanneer je van apparaat wisselt.
Afhankelijk van de site in kwestie, kan het nodig zijn om deze opnieuw te laden voor goede resultaten. Dit is bijvoorbeeld het geval bij Ghacks, waar ik de pagina opnieuw moest laden om de mobiele versie van de site weer te geven.
Een andere interessante optie is de mogelijkheid om de schermbreedte en -hoogte snel om te wisselen om ook de landschapsmodus te emuleren.
U kunt meer te weten komen over andere functies van de apparaatmodus op de officiële Chrome Developer-website .
Gevolgtrekking
De apparaatmodus biedt een uitstekende manier om te testen hoe website-inhoud wordt weergegeven op verschillende geëmuleerde mobiele apparaten. Het kan worden gebruikt om snel te testen of de mobiele versie van een site werkt zoals bedoeld, of dat er wijzigingen moeten worden aangebracht om de inhoud beter weer te geven aan mobiele gebruikers.