Deze pagina is vertaald door de Cloud Translation API.

Simuleer mobiele apparaten met apparaatmodus

Kayce Basques

Sofia Emelianova

Gebruik de apparaatmodus om een benadering te krijgen van hoe uw pagina eruitziet en presteert op een mobiel apparaat.

Overzicht

Apparaatmodus is de naam voor een verzameling functies in Chrome DevTools waarmee je mobiele apparaten kunt simuleren. Deze functies omvatten:

Het simuleren van een mobiele viewport
De CPU-prestaties beperken
Het netwerk afremmen
Belangrijk punt: U kunt de verbindingssnelheid ook beperken via het netwerkpaneel .
Daarnaast vindt u in het paneel Sensoren het volgende:
- Simulatie van geolocatie
- Instellingsoriëntatie

Beperkingen

Zie de apparaatmodus als een eerste benadering van hoe uw pagina eruitziet en aanvoelt op een mobiel apparaat. In de apparaatmodus voert u uw code niet daadwerkelijk uit op een mobiel apparaat. U simuleert de mobiele gebruikerservaring vanaf uw laptop of desktop.

Er zijn bepaalde aspecten van mobiele apparaten die DevTools nooit zal kunnen simuleren. De architectuur van mobiele CPU's is bijvoorbeeld heel anders dan die van laptop- of desktop-CPU's. Bij twijfel kunt u het beste uw pagina daadwerkelijk op een mobiel apparaat uitvoeren. Gebruik de functie 'Foutopsporing op afstand' om de code van een pagina te bekijken, te wijzigen, te debuggen en te profileren vanaf uw laptop of desktop, terwijl deze daadwerkelijk op een mobiel apparaat wordt uitgevoerd.

Open de apparaatwerkbalk

Volg deze stappen om de apparaatwerkbalk te openen:

Open DevTools .
Klik op om de apparaatwerkbalk in de actiebalk bovenaan in of uit te schakelen .

De knop voor het in- en uitschakelen van de apparaatwerkbalk

Simuleer een mobiele viewport

Standaard wordt de apparaatwerkbalk in de viewport geopend met de optie 'Afmetingen' ingesteld op 'Responsief' . Met behulp van het vervolgkeuzemenu ' Afmetingen ' kunt u de afmetingen van een specifiek mobiel apparaat simuleren .

De apparaatwerkbalk.

Responsieve weergavemodus

Sleep de handgrepen om het weergavegebied aan te passen aan de gewenste afmetingen. Of voer specifieke waarden in de vakken voor breedte en hoogte in. In dit voorbeeld is de breedte ingesteld op 480 en de hoogte op 415 .

De handgrepen om de afmetingen van de viewport aan te passen in de responsieve viewportmodus.

U kunt ook de breedtevoorinstellingenbalk gebruiken om de breedte met één klik in te stellen op een van de volgende opties:

De balk met breedte-instellingen.

Mobiele S	Mobiel M	Mobiel L	Tablet	Laptop	Laptop L	4K
320px	375px	425px	768px	1024px	1440px	2560px

Mediavragen weergeven

Om mediaquery-breekpunten boven uw weergavegebied weer te geven, klikt u op Meer opties > Mediaquery's weergeven .

Toon mediavragen.

DevTools toont nu twee extra balken boven het weergavegebied:

De blauwe balk met breekpunten max-width .
De oranje balk met breekpunten min-width .

Klik tussen breakpoints om de breedte van de viewport te wijzigen, zodat het breakpoint wordt geactiveerd.

Klik tussen de breakpoints om de breedte van het weergavegebied te wijzigen.

Om de bijbehorende @media -declaratie te vinden, klikt u met de rechtermuisknop tussen breakpoints en selecteert u 'Weergeven in broncode' . DevTools opent het paneel 'Bronnen ' op de betreffende regel in de editor .

Weergeven in het vervolgkeuzemenu voor broncode.

Stel de pixelverhouding van het apparaat in.

De apparaatpixelratio (DPR) is de verhouding tussen de fysieke pixels op het hardwarematige scherm en de logische (CSS) pixels. Met andere woorden, de DPR vertelt Chrome hoeveel schermpixels er nodig zijn om een CSS-pixel te tekenen. Chrome gebruikt de DPR-waarde bij het tekenen op HiDPI-schermen (High Dots Per Inch).

Om een DPR-waarde in te stellen:

Klik op Meer opties > Apparaatpixelverhouding toevoegen .
Selecteer in de actiebalk bovenaan het venster een DPR-waarde uit het nieuwe DPR -dropdownmenu.

Stel het apparaattype in.

Gebruik de lijst 'Apparaattype' om een mobiel apparaat of een desktopapparaat te simuleren.

De lijst met apparaattypen.

Als je de lijst niet in de actiebalk bovenaan ziet, selecteer dan Meer opties. > Apparaattype toevoegen .

De volgende tabel beschrijft de verschillen tussen de opties. De weergavemethode geeft aan of Chrome de pagina weergeeft als een mobiele of desktopweergave. Het cursorpictogram geeft aan welk type cursor u ziet wanneer u met de muis over de pagina beweegt. Geactiveerde gebeurtenissen geven aan of de pagina touch of click activeert wanneer u met de pagina interacteert.

Optie	Weergavemethode	Cursorpictogram	Gebeurtenissen in gang gezet
Mobiel	Mobiel	Cirkel	aanraken
Mobiel (niet aanraakgevoelig)	Mobiel	Normaal	klik
bureaublad	bureaublad	Normaal	klik
Desktop (touchscreen)	bureaublad	Cirkel	aanraken

Apparaatspecifieke modus

Om de afmetingen van een specifiek mobiel apparaat te simuleren, selecteert u het apparaat in de lijst ' Afmetingen '.

De lijst met afmetingen.

Zie voor meer informatie Een aangepast mobiel apparaat toevoegen .

Draai het venster naar de liggende stand (landscape).

Klik op schermrotatie het venster naar de liggende stand te draaien.

Landschapsoriëntatie.

Merk op dat de Rotate De knop verdwijnt als de werkbalk van uw apparaat smal is.

De apparaatwerkbalk.

Zie ook Oriëntatie instellen .

Schakel de modus voor twee schermen in/uit.

Sommige apparaten, zoals de Surface Duo, hebben twee schermen en kunnen op twee manieren worden gebruikt: met één of met beide schermen actief.

Om te schakelen tussen een enkel en een dubbel scherm, klikt u op in de werkbalk om de modus voor een dubbel scherm te wisselen .

De modus met twee schermen is ingeschakeld.

Stel de apparaatpositie in

Sommige apparaten, zoals de Asus Zenbook Fold, hebben opvouwbare schermen. Zulke schermen hebben een stand: continu of opgevouwen. De continue stand verwijst naar een "platte" positie, terwijl het opgevouwen scherm een hoek vormt tussen de verschillende delen van het scherm.

Om de apparaatpositie in te stellen, selecteert u 'Continu' of 'Gevouwen' in het bijbehorende vervolgkeuzemenu in de werkbalk.

Houding ingesteld op opgevouwen.

Toon het frame van het apparaat

Wanneer je de afmetingen van een specifiek mobiel apparaat zoals een Nest Hub simuleert, selecteer je Meer opties. > Toon het apparaatframe om het fysieke frame van het apparaat rond de viewport weer te geven.

Toon het frame van het apparaat.

In dit voorbeeld toont DevTools het frame voor de Nest Hub.

Het frame voor de Nest Hub.

Voeg een aangepast mobiel apparaat toe

Om een aangepast apparaat toe te voegen:

Klik op de lijst met apparaten en selecteer vervolgens Bewerken .
naar Instellingen > tabblad Apparaten en kies een apparaat uit de lijst met ondersteunde apparaten of klik op Aangepast apparaat toevoegen om uw eigen apparaat toe te voegen.
Als je je eigen apparaat toevoegt, voer dan een naam, breedte en hoogte in en klik vervolgens op Toevoegen .
De velden voor de pixelverhouding van het apparaat , de user agent-string en het apparaattype zijn optioneel. Het veld voor het apparaattype is de lijst die standaard is ingesteld op Mobiel .
Ga terug naar de viewport en selecteer het zojuist toegevoegde apparaat in de lijst met afmetingen .

Toon linialen

Klik op Meer opties > Linialen weergeven om de linialen te zien. De linialen worden weergegeven in pixels.

Toon linialen.

DevTools toont linialen bovenaan en links in het venster.

Linialen boven en links van het kijkvenster.

Klik op de linialen bij de aangegeven markeringen om de breedte en hoogte van het weergavegebied in te stellen.

Vergroot het weergavegebied

Gebruik de zoomlijst om in of uit te zoomen.

Zoom.

Maak een screenshot

Om een schermafbeelding te maken van wat u in het venster ziet, klikt u op Meer opties > Schermafbeelding maken .

De optie 'Schermafbeelding maken' in het menu 'Meer opties'.

Om een schermafbeelding van de hele pagina te maken, inclusief de inhoud die niet zichtbaar is in het weergavegebied, selecteert u 'Een schermafbeelding op volledige grootte maken' in hetzelfde menu.

Om een apparaatkader toe te voegen bij het maken van een schermafbeelding in de apparaatspecifieke modus , moet u eerst 'Apparaatkader weergeven' selecteren en vervolgens op 'Schermafbeelding maken' klikken, zoals eerder beschreven.

Een screenshot maken inclusief het kader van het apparaat.

Voor andere manieren om schermafbeeldingen te maken met DevTools, zie 4 manieren om schermafbeeldingen te maken met DevTools .

Beperk de netwerk- en CPU-belasting.

Om zowel het netwerk als de CPU te beperken, selecteer je 'Middenklasse mobiel' of 'Laagklasse mobiel' in de lijst 'Beperking '.

De Throttle-lijst.

Mid-range mobiele apparaten simuleren snelle 3G en beperken de prestaties van je CPU tot vier keer de normale snelheid. Low-end mobiele apparaten simuleren trage 3G en beperken de prestaties van je CPU tot zes keer de normale snelheid. Houd er rekening mee dat de mate van beperking relatief is ten opzichte van de normale capaciteit van je laptop of desktop.

Houd er rekening mee dat de lijst met gashendels verborgen is als uw apparaatwerkbalk smal is.

Beperk alleen de CPU-prestaties.

Om alleen de CPU te beperken en niet het netwerk, ga je naar het paneel Prestaties en klik je op Opname-instellingen. en selecteer vervolgens 4x vertraging , 6x vertraging of 20x vertraging in de CPU- lijst.

De CPU-lijst.

Beperk alleen de netwerksnelheid.

Om alleen de netwerksnelheid te beperken en niet de CPU, ga je naar het netwerkpaneel en selecteer je 'Snel 3G' of 'Langzaam 3G' in de lijst 'Beperking '.

De Throttle-lijst.

Of druk op Command+Shift+P (Mac) of Control+Shift+P (Windows, Linux, ChromeOS) om het Command Menu te openen, typ 3G en selecteer Snelle 3G-throttling inschakelen of Langzame 3G-throttling inschakelen .

Je kunt netwerkbeperking ook instellen via het paneel Prestaties . Klik op Opname-instellingen. en selecteer vervolgens Snel 3G of Langzaam 3G in de netwerklijst .

Netwerkbeperking instellen via het paneel Prestaties.

Sensoren emuleren

Gebruik het paneel Sensoren om geolocatie te overschrijven, de apparaatoriëntatie te simuleren, force touch uit te voeren en de inactieve toestand te emuleren.

In de volgende paragrafen wordt kort uitgelegd hoe u de geolocatie kunt overschrijven en de oriëntatie van het apparaat kunt instellen. Voor een volledig overzicht van de functies, zie Apparaatsensoren emuleren .

Geolocatie overschrijven

Om de gebruikersinterface voor het overschrijven van geolocatie te openen, klikt u op 'Aanpassen en beheer DevTools'. en selecteer vervolgens Meer tools > Sensoren .

Sensoren

Of druk op Command+Shift+P (Mac) of Control+Shift+P (Windows, Linux, ChromeOS) om het Command Menu te openen, typ Sensors en selecteer vervolgens Show Sensors .

Sensoren weergeven

Selecteer een van de voorinstellingen in de lijst Locatie , of selecteer Andere... om uw eigen coördinaten in te voeren, of selecteer Locatie niet beschikbaar om te testen hoe uw pagina zich gedraagt wanneer de geolocatie een foutstatus heeft.

Geolocatie

Stel de oriëntatie in.

Om de gebruikersinterface voor de oriëntatie te openen, klikt u op ' Aanpassen en beheer de ontwikkelaarstools'. en selecteer vervolgens Meer tools > Sensoren .