Simuleer mobiele apparaten met apparaatmodus

Kayce Basken
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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

Overzicht

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

Beperkingen

Beschouw de apparaatmodus als een eerste orde benadering van hoe uw pagina eruit ziet en aanvoelt op een mobiel apparaat. Met de apparaatmodus voert u uw code niet daadwerkelijk uit op een mobiel apparaat. Je simuleert de mobiele gebruikerservaring vanaf je laptop of desktop.

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

Open de apparaatwerkbalk

Volg deze stappen om de apparaatwerkbalk te openen:

  1. Open DevTools .
  2. Klik op apparaten Schakel de apparaatwerkbalk in de actiebalk bovenaan.

De schakelknop op de apparaatwerkbalk

Simuleer een mobiele viewport

Standaard wordt de apparaatwerkbalk geopend in de viewport met Afmetingen ingesteld op Responsive . Met behulp van de vervolgkeuzelijst Afmetingen kunt u de afmetingen van een specifiek mobiel apparaat simuleren .

De apparaatwerkbalk.

Responsieve Viewport-modus

Versleep de handvatten om het formaat van het venster aan te passen aan de gewenste afmetingen. Of voer specifieke waarden in de vakken Breedte en Hoogte in. In dit voorbeeld is de breedte ingesteld op 480 en de hoogte op 415 .

De handvatten voor het wijzigen van de afmetingen van het venster in de responsieve venstermodus.

U kunt ook de balk met voorinstellingen voor de breedte gebruiken om de breedte met een klik in te stellen op een van de volgende opties:

De balk met voorinstellingen voor de breedte.

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

Mediaquery's weergeven

Als u mediaquery-breekpunten boven uw viewport wilt weergeven, klikt u op Meer opties. Meer opties > Mediaquery's weergeven .

Mediaquery's weergeven.

DevTools geeft nu twee extra balken weer boven de viewport:

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

Klik tussen breekpunten om de breedte van het venster te wijzigen, zodat het breekpunt wordt geactiveerd.

Klik tussen breekpunten om de breedte van het venster te wijzigen.

Om de corresponderende @media declaratie te vinden, klikt u met de rechtermuisknop tussen breekpunten en selecteert u Reveal in source code . DevTools opent het Bronnenpaneel op de overeenkomstige regel in de Editor .

Onthullen in het vervolgkeuzemenu voor de broncode.

Pixelverhouding van apparaat instellen

Apparaatpixelverhouding (DPR) is de verhouding tussen fysieke pixels op het hardwarescherm en logische (CSS) pixels. Met andere woorden, DPR vertelt Chrome hoeveel schermpixels er moeten worden gebruikt om een ​​CSS-pixel te tekenen. Chrome gebruikt de DPR-waarde bij het tekenen op HiDPI-schermen (High Dots Per Inch).

Een DPR-waarde instellen:

  1. Klik op Meer opties Meer opties. > Pixelverhouding van apparaat toevoegen .

    Pixelverhouding van apparaat toevoegen.

  2. Selecteer in de actiebalk bovenaan het kijkvenster een DPR-waarde in het nieuwe DPR- vervolgkeuzemenu.

    De DPR-waarde instellen.

Stel het apparaattype in

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

De lijst Apparaattype.

Als u de lijst niet op de actiebalk bovenaan ziet, selecteert u Meer opties Meer opties. > Apparaattype toevoegen .

In de volgende tabel worden de verschillen tussen de opties beschreven. De weergavemethode verwijst naar de vraag of Chrome de pagina weergeeft als mobiele of desktopviewport. Het cursorpictogram verwijst naar het type cursor dat u ziet als u over de pagina zweeft. Geactiveerde gebeurtenissen verwijzen naar de vraag of de pagina touch of click activeert wanneer u interactie heeft met de pagina.

Optie Weergavemethode Cursorpictogram Evenementen ontslagen
Mobiel Mobiel Cirkel aanraken
Mobiel (geen aanraking) Mobiel Normaal klik
Bureaublad Bureaublad Normaal klik
Bureaublad (aanraking) 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 Een aangepast mobiel apparaat toevoegen voor meer informatie.

Roteer het kijkvenster naar de liggende stand

Klik op screen_rotation Rotate om het kijkvenster naar de liggende stand te draaien.

Liggende oriëntatie.

Merk op dat de Rotate Draaien. knop verdwijnt als uw apparaatwerkbalk smal is.

De apparaatwerkbalk.

Zie ook Oriëntatie instellen .

Schakel de modus voor twee schermen in

Sommige apparaten, bijvoorbeeld Surface Duo, hebben twee schermen en twee manieren om ze te gebruiken: met één of beide schermen actief.

Om te schakelen tussen dubbel en enkel scherm, klikt u op devices_fold Toggle dual-screen mode in de werkbalk.

De dual-screen-modus is ingeschakeld.

Stel de apparaatpositie in

Sommige apparaten, bijvoorbeeld Asus Zenbook Fold, hebben opvouwbare schermen. Dergelijke schermen hebben een houding: doorlopend of gevouwen. De continue houding verwijst naar een "platte" positie en gevouwen vormt een hoek tussen delen van het scherm.

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

Houding ingesteld op gevouwen.

Apparaatframe weergeven

Wanneer u de afmetingen van een specifiek mobiel apparaat zoals een Nest Hub simuleert, selecteert u Meer opties Meer opties. > Apparaatframe tonen om het fysieke apparaatframe rond de viewport weer te geven.

Apparaatframe weergeven.

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

Het apparaatframe voor de Nest Hub.

Voeg een aangepast mobiel apparaat toe

Een aangepast apparaat toevoegen:

  1. Klik op de apparaatlijst en selecteer vervolgens Bewerken .

    Bewerking.

  2. Op het tabblad Instellingen > Apparaten kiest u een apparaat uit de lijst met ondersteunde apparaten of klikt u op Aangepast apparaat toevoegen om uw eigen apparaat toe te voegen.

  3. Als u uw eigen apparaat toevoegt, voert u een naam, breedte en hoogte in voor het apparaat en klikt u vervolgens op Toevoegen .

    Een aangepast apparaat maken.

    De velden voor de pixelverhouding van het apparaat , de user-agentstring en het apparaattype zijn optioneel. Het veld Apparaattype is de lijst die standaard is ingesteld op Mobiel .

  4. Terug in de viewport selecteert u het nieuw toegevoegde apparaat in de lijst Afmetingen .

Toon heersers

Klik op Meer opties Meer opties. > Toon linialen om linialen te zien. De maateenheid van de linialen is pixels.

Toon heersers.

DevTools toont linialen bovenaan en links van de viewport.

Linialen boven en links van het venster.

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

Zoom in op het kijkvenster

Gebruik de zoomlijst om in of uit te zoomen.

Zoom.

Maak een screenshot

Om een ​​screenshot te maken van wat u in de viewport ziet, klikt u op Meer opties. Meer opties > Schermafdruk maken .

De optie Screenshot vastleggen in het menu Meer opties.

Om een ​​screenshot te maken van de hele pagina, inclusief de inhoud die niet zichtbaar is in de viewport, selecteert u Een screenshot op volledige grootte maken in hetzelfde menu.

Als u een apparaatframe wilt opnemen bij het maken van een schermafbeelding in de apparaatspecifieke modus , moet u eerst Apparaatframe weergeven en vervolgens klikken op Schermafbeelding maken, zoals eerder aangegeven.

Een screenshot maken met een apparaatframe inbegrepen.

Als u andere manieren wilt leren om schermafbeeldingen te maken met DevTools, raadpleegt u 4 manieren om schermafbeeldingen te maken met DevTools .

Geef het netwerk en de CPU gas

Om zowel het netwerk als de CPU te beperken, selecteert u Mid-tier mobiel of Low-end mobiel in de lijst Throttle .

De Throttle-lijst.

Mid-tier mobiel simuleert snelle 3G en beperkt uw CPU zodat deze 4 keer langzamer is dan normaal. Low-end mobiele apparaten simuleren trage 3G en vertragen uw CPU 6 keer langzamer dan normaal. Houd er rekening mee dat de beperking relatief is ten opzichte van de normale capaciteit van uw laptop of desktop.

Houd er rekening mee dat de Throttle -lijst verborgen zal zijn als uw apparaatwerkbalk smal is.

Geef alleen gas aan de CPU

Als u alleen de CPU wilt beperken en niet het netwerk, gaat u naar het paneel Prestaties en klikt u op Capture-instellingen Instellingen vastleggen. en selecteer vervolgens 4x vertraging , 6x vertraging of 20x vertraging in de CPU- lijst.

De CPU-lijst.

Geef alleen het netwerk gas

Als u alleen het netwerk wilt beperken en niet de CPU, gaat u naar het netwerkpaneel en selecteert u Snel 3G of Langzaam 3G in de lijst Throttle .

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-beperking inschakelen of Langzame 3G-beperking inschakelen .

Het Commandomenu.

U kunt netwerkbeperking ook instellen via het paneel Prestaties . Klik op Vastleginstellingen Instellingen vastleggen. en selecteer vervolgens Snel 3G of Langzaam 3G in de netwerklijst .

Netwerkbeperking instellen via het paneel Prestaties.

Sensoren emuleren

Gebruik het deelvenster Sensoren om geolocatie te overschrijven, de oriëntatie van het apparaat te simuleren, aanraking te forceren en de inactieve status te emuleren.

In de volgende secties wordt kort uitgelegd hoe u de geolocatie kunt overschrijven en de apparaatoriëntatie kunt instellen. Zie Apparaatsensoren emuleren voor een volledige lijst met functies.

Geolocatie overschrijven

Om de gebruikersinterface die geolocatie overschrijft te openen, klikt u op DevTools aanpassen en beheren Pas DevTools aan en beheer deze. en selecteer vervolgens Meer hulpmiddelen > 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 Sensors tonen .

Sensoren tonen

Selecteer een van de voorinstellingen uit de Locatielijst , of selecteer Overige... om uw eigen coördinaten in te voeren, of selecteer Locatie niet beschikbaar om te testen hoe uw pagina zich gedraagt ​​wanneer de geolocatie zich in een foutstatus bevindt.

Geolocatie

Oriëntatie instellen

Om de oriëntatie-UI te openen, klikt u op DevTools aanpassen en beheren Pas DevTools aan en beheer deze. en selecteer vervolgens Meer hulpmiddelen > 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 Sensors tonen .

Sensoren tonen

Selecteer een van de voorinstellingen in de lijst Oriëntatie of selecteer Aangepaste oriëntatie om uw eigen alfa-, bèta- en gammawaarden in te stellen.

Oriëntatie