De mobiele versie van een website bekijken in Chrome

Testen hoe een pagina er op een telefoon uitziet, zou niet moeten betekenen dat je tien apparaten nodig hebt. Deze gids legt uit hoe je de mobiele versie van websitepagina's rechtstreeks in je browser bekijkt — met de mobiele weergave die Chrome al bevat en een gratis extensie die veel meer op een echte telefoon lijkt.

Waarom de mobiele weergave controleren

Meer dan de helft van al het webverkeer is mobiel, maar lay-outs die er op een laptop perfect uitzien, lopen op kleinere schermen vaak mis: tekst loopt over, knoppen overlappen, afbeeldingen worden uitgerekt. Weten hoe je de mobiele versie van een website vóór je bezoekers bekijkt, voorkomt slechte eerste indrukken en verloren conversies. Het helpt ook de SEO, omdat zoekmachines pagina's beoordelen op hoe goed ze op mobiel werken.

Methode 1: apparaatmodus van Chrome DevTools

De snelste mobiele weergave in Chrome biedt de apparaatmodus van DevTools. Zo open je die:

1. Open de website in Chrome.
2. Klik met de rechtermuisknop op de pagina en kies Inspecteren (of druk op F12).
3. Klik op het pictogram van de apparaatbalk of druk op Ctrl+Shift+M.
4. Kies een schermformaat in het dropdownmenu bovenaan.
5. Vernieuw de pagina zodat deze met de mobiele user-agent laadt.

Dit is snel en gratis, maar heeft echte beperkingen:

• Het toont alleen de viewport, zonder apparaatframe, statusbalk of realistische browserinterface.
• Het bootst Safari op iOS of een specifieke Android-versie niet volledig na.
• Meerdere apparaten naast elkaar vergelijken is omslachtig.
• De interface is bedoeld voor ontwikkelaars, niet voor designers of QA-teams.

Methode 2: Phone Simulator voor een realistische apparaatweergave

Voor een voorbeeld dat echt op een telefoon lijkt, werken extensies zoals Phone Simulator het best. Deze rendert het huidige tabblad in een echt apparaatframe, met de juiste viewport, user-agent en systeemweergave.

Daarmee kun je:

• Kiezen uit meer dan 40 apparaten: iPhone, Samsung Galaxy, Pixel, iPad, laptops en meer.
• Wisselen tussen staand en liggend, plus tussen licht en donker thema.
• Twee apparaten tegelijk bekijken (tot 8 met PRO) met gesynchroniseerd scrollen.
• Schermafbeeldingen maken en het scherm opnemen om met je team te delen.
• Een aangepast apparaat maken met elke grootte, systeem, kleur en user-agent.

Zo begin je:

1. Installeer Phone Simulator uit de Chrome Web Store.
2. Open de website die je wilt controleren en klik op de extensie.
3. Selecteer een apparaat: de pagina laadt direct in een realistisch frame.
4. Wissel van apparaat of oriëntatie om elke lay-out te zien.

Dit alles werkt met het gratis abonnement, dus je kunt je site op mobiel testen zonder iets te betalen.

Wanneer de realistische weergave echt helpt

Een simpele viewport volstaat voor een snelle breedtecontrole, maar sommige taken vragen om het volledige beeld:

• Een klant een mobiele weergave van de site tonen die hij meteen als een telefoon herkent.
• Controleren hoe een vaste header onder een notch of de statusbalk valt.
• De donkere modus op een specifiek apparaat nakijken.
• Nette schermafbeeldingen maken voor een pitch, een storevermelding of documentatie.

Welke methode je moet kiezen

Als je tijdens het programmeren alleen een snelle pixelcontrole nodig hebt, volstaat de mobiele weergave van Chrome DevTools. Als je de site als mobiel wilt zien zoals echte gebruikers die zien, apparaten wilt vergelijken of schermafbeeldingen wilt maken, is Phone Simulator de betere keuze. Wie beide manieren beheerst, heeft altijd het juiste gereedschap voor de klus.