Tutorial

Een mobiel apparaat emuleren in een desktopbrowser (Chrome, Firefox, Opera, Edge en Internet Explorer)

Er zijn websites die meer opties en functies bieden wanneer ze op mobiele apparaten worden bezocht. Wanneer dat gebeurt en u een desktopbrowser gebruikt, raakt u gefrustreerd vanwege de beperkte gebruikerservaring die u krijgt. Andere keren wilt u misschien testen en zien hoe een website eruit ziet op een bepaald mobiel apparaat zoals de iPhone, de iPad of een Pixel 2-smartphone. Hier ziet u hoe u een mobiele site op een desktop pc kunt bekijken (en testen):

OPMERKING: Deze gids behandelt Google Chrome, Mozilla Firefox, Opera, Microsoft Edge en Internet Explorer onder Windows. Ga naar de sectie voor de browser die u interesseert, om de stappen te vinden die u moet doorlopen.

Hoe de mobiele browser-emulator in Google Chrome te activeren

In Google Chrome laadt u de mobiele website die u wilt bekijken. Klik of tik vervolgens op de drie verticale stippen in de rechterbovenhoek. Ze zijn de knop voor 'Google Chrome aanpassen en beheren'. Kies in het menu dat wordt geopend Meer hulpmiddelen en vervolgens 'Ontwikkelaarstools'. De ontwikkelaarstools openen. Om hetzelfde resultaat te bereiken, kunt u ook op de CTRL + Shift + I- toetsen op uw toetsenbord drukken.

Klik of tik op de knop "Apparaatbalk omschakelen" (het is een kleine knop die lijkt op een smartphone en een tablet in de buurt van elkaar) of druk op CTRL + Shift + M op uw toetsenbord. Dit activeert de apparaatwerkbalk waar de mobiele pagina is geladen. Standaard gebruikt de apparaatwerkbalk een responsieve sjabloon voor de pagina die u hebt geladen. Klik erop en kies het mobiele apparaat dat u wilt emuleren: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (van versie 5 tot iPhone X), iPad en iPad Pro. De mobiele pagina wordt opnieuw geladen alsof u de smartphone of tablet gebruikt die u in de lijst hebt gekozen. Het weet niet dat u een desktopcomputer gebruikt.

Als u klaar bent, drukt u op de knop X (Sluiten) in de rechterbovenhoek van de ontwikkelaarstools van Google Chrome om terug te gaan naar de standaardmodus voor browsen op het bureaublad.

Hoe de mobiele browser-emulator in Mozilla Firefox te activeren

Open in Mozilla Firefox de mobiele pagina waartoe u toegang wilt hebben alsof u een mobiel apparaat gebruikt. Klik of tik vervolgens op de burger-knop in de rechterbovenhoek. Het heet "Open menu".

Kies Web-ontwikkelaar in het menu dat wordt geopend.

Je ziet veel opties die handig zijn voor ontwikkelaars. Degene die je interesseert, is 'Responsive Design Mode'. Klik of tik op deze optie. Deze specifieke manier van kijken naar een webpagina is nu in Firefox geladen. Hetzelfde resultaat kan worden bereikt door op CTRL + Shift + M op uw toetsenbord te drukken.

De responsieve ontwerpmodus is ingeschakeld. In het midden van het scherm ziet u de parameters die door deze modus worden gebruikt. Als er geen apparaat is geselecteerd, klik of tik op in de vervolgkeuzelijst met apparaten die beschikbaar zijn voor emulatie en kies degene die u wilt simuleren: Samsung Galaxy S9, iPad, iPhone (van versie 6 tot iPhone X), Kindle Fire HDX, enzovoort. De mobiele pagina wordt opnieuw geladen alsof deze is geladen op het mobiele apparaat dat u voor emulatie hebt geselecteerd.

Wanneer u klaar bent, drukt u op de knop X (Close Responsive Design Mode) om terug te gaan naar de standaardmodus voor bladeren op het bureaublad.

Hoe de mobiele browser-emulator in Opera te activeren

In Opera laadt u de mobiele pagina die u wilt bekijken alsof u een mobiel apparaat gebruikt. Klik vervolgens op het Opera-pictogram in de linkerbovenhoek. Het is de knop "Opera aanpassen en bedienen" . Kies Ontwikkelaar gevolgd door Developer-tools in het menu dat wordt geopend. De ontwikkelaarstools worden aan de rechterkant van het browservenster weergegeven. Hetzelfde resultaat kan worden bereikt door op de toetsen CTRL + Shift + I op uw toetsenbord te drukken.

Klik of tik vervolgens op de knop "Apparaatbalk omschakelen" (het is een kleine knop die lijkt op een smartphone en een tablet in de buurt van elkaar) of druk op CTRL + Shift + M op uw toetsenbord. Dit activeert de apparaatwerkbalk waar uw webpagina is geladen. Klik erop en kies het mobiele apparaat dat u wilt emuleren: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (van versie 5 tot iPhone X), iPad en iPad Pro. De mobiele pagina wordt opnieuw in Opera geladen, met behulp van de kenmerken van de smartphone of tablet die u in de lijst hebt gekozen.

Wanneer u klaar bent, drukt u op de knop X (Sluiten) in de rechterbovenhoek van Opera's ontwikkelaarstools om terug te gaan naar het bureaublad.

Hoe de mobiele browser-emulator in Microsoft Edge te activeren

In Microsoft Edge laadt u de site die u wilt bekijken alsof u een mobiel apparaat gebruikt. Klik of tik vervolgens op de knop 'Instellingen en meer' in de rechterbovenhoek van het browservenster. Het pictogram ziet er uit als drie punten. Als u de update van Windows 10 oktober 2018 gebruikt, gaat u naar 'Meer hulpprogramma's' en vervolgens naar 'Developer Tools'. Als u Windows 10 april 2018-update of ouder gebruikt, kiest u F12 Developer Tools . De ontwikkelaarstools worden onderaan het browservenster geopend. U kunt hetzelfde resultaat bereiken door op F12 op uw toetsenbord te drukken, ongeacht hoe oud of nieuw uw Windows 10 is.

Je ziet verschillende tabbladen in de ontwikkelaarstools . Als u Emulatie ziet, klikt of tikt u erop. Als u dat niet doet, klikt of tikt u op de pijl-omlaag en kiest u Emulatie in het menu dat wordt geopend.

Klik of tik vervolgens op de vervolgkeuzelijst Apparaat . U kunt ervoor kiezen om de volgende apparaten te emuleren: Lumia 650, Lumia 950, Lumia 950 XL, Surface Book, Surface Pro 4, iPad, iPad Mini, Nexus 5, Nexus 5X en Nexus 6P.

Wanneer u klaar bent, drukt u op de knop X (Sluiten) in de rechterbovenhoek van de ontwikkelaarstools van Microsoft Edge om terug te gaan naar het bureaublad.

Hoe de mobiele browseremulator in Internet Explorer te activeren

In Internet Explorer naar de mobiele pagina die u wilt bekijken alsof u een mobiel apparaat gebruikt. Klik op de knop Extra in de rechterbovenhoek of druk op ALT + X op uw toetsenbord. Kies vervolgens F12 Developer Tools . De ontwikkelaarstools worden onderaan in Internet Explorer weergegeven. Hetzelfde resultaat kan worden bereikt door op F12 op uw toetsenbord te drukken.

Klik of tik op het tabblad Emulatie en vervolgens op de vervolgkeuzelijst Browser . Hier moet u Windows Phone selecteren als uw mobiele apparaat en de webpagina wordt opnieuw geladen alsof u een smartphone met Windows Phone gebruikt . Helaas biedt Internet Explorer u niet de mogelijkheid om Android-smartphones of iPhones en iPads te emuleren.

Wanneer u klaar bent, drukt u op de knop X (Sluiten) in de rechterbovenhoek van de ontwikkelaarshulpprogramma's om terug te gaan naar het bureaublad.

Op welke websites moet u een mobiel apparaat emuleren?

Nu weet u hoe u allerlei mobiele apparaten in uw favoriete webbrowser kunt emuleren. Voordat je deze tutorial afsluit, laat ons weten welke websites je nodig hebt om deze emulatiefunctie te gebruiken. We zijn erg benieuwd. Is het de (in) beroemde Instagram of een andere mobiele site?