Simulera mobila enheter med enhetsläge i Chrome DevTools

av Kayce Basques

teknisk skribent, Chrome DevTools & fyr

använd enhet läge för att approximera hur din sida ser ut och fungerar på en mobil enhet.

enhetsläge är namnet på den lösa samlingen av funktioner i Chrome DevTools somhjälper dig att simulera mobila enheter., Dessa funktioner inkluderar:

simulera en mobil viewport
Strypa nätverket
Strypa CPU
simulera geolocation
inställning orientering

begränsningar

Tänk på enhetsläge som en första ordningens approximation av hur dinsida ser ut och känns på en mobil enhet. Med enhetsläge kör du inte din kodpå en mobil enhet. Du simulerar den mobila användarupplevelsen från din bärbara eller stationära dator.

det finns vissa aspekter av mobila enheter som DevTools aldrig kommer att kunna simulera., Till exempel är arkitekturen i mobila processorer väldigt annorlunda än arkitekturen i bärbara datorer. När du är osäker, din bästa insats är att faktiskt köra din sida på en mobil enhet. Använd fjärrfelsökning för att visa, ändra,felsöka och profilera en sidkod från din bärbara eller stationära dator medan den faktiskt körs på en mobil enhet.

simulera en mobil viewport

klicka på Växla Enhetsverktygsfält för att öppna användargränssnittet somgör att du kan simulera en mobil viewport.

som standard öppnas Enhetsverktygsfältet i responsivt visningsläge.

responsivt visningsläge

dra handtagen för att ändra storlek på visningsområdet till alla dimensioner du behöver. Eller ange specifika värdei bredd och höjd lådor. I Figur 2 är bredden inställd på 628 och höjden är inställd på662.

Visa mediefrågor

om du vill visa mediefrågebrytpunkter ovanför visningsområdet klickar du på Fler alternativ och väljer sedan Visa mediaqueries.

klicka på en brytpunkt för att ändra visningsområdets bredd så att brytpunkten utlöses.

Figur 4., Klicka på en brytpunkt för att ändra visningsområdets bredd

Ställ in enhetstypen

använd listan Enhetstyp för att simulera en mobil enhet eller stationär enhet.

tabellen nedan beskriver skillnaderna mellan alternativen. Renderingsmetoderhänvisar till Om Chrome gör sidan som en mobil eller stationär visningsort. Markörikonhänvisar till vilken typ av markör du ser när du håller muspekaren över sidan., Händelser avfyrade hänvisar till om sidan avfyrartouch ellerclick händelser när du interagerar med sidan.,id=”b8e8c2fed7″>

Option Rendering method Cursor icon Events fired

Mobile Mobile Circle touch Mobile (no touch) Mobile Normal click Desktop Desktop Normal click Desktop (touch) Desktop Circle touch

Mobile Device Viewport Mode

To simulate the dimensions of a specific mobile device, select the device from the Device list.,

Rotate the viewport to landscape orientation

Click Rotate to rotate the viewport to landscape orientation.

Note that the Rotate button disappears if your Device Toolbar is narrow.

Se även ange orientering.

Visa enhetsram

När du simulerar dimensionerna för en viss mobil enhet som en iPhone 6, öppna fler alternativoch välj sedan Visa enhetsram för att visa den fysiska enhetsramen runt visningsområdet.

Lägg till en anpassad mobilenhet

för att lägga till en egen enhet:

klicka på enhetslistan och välj sedan Redigera.

Figur 11. Välja Redigera
klicka på Lägg till anpassad enhet.
Ange ett namn, bredd och höjd för enheten. Pixelförhållandet mellan enheter,användaragentsträng och enhetstyp är valfria. Fältet enhetstyp är listan somär inställd på mobil som standard.,

Figure 12. Creating a custom device

Show rulers

Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.

Figure 14., Linjaler ovan och till vänster om visningsområdet

zooma visningsområdet

använd Zoomlistan för att zooma in eller ut.

Strypa nätet och CPU

för att strypa nätet och CPU, välj mid-tier mobil eller low-end mobilfrån Gaslistan.

mid-tier mobile simulerar snabb 3G och stryper din CPU så att den är 4 gångerslägre än normalt. Low-end mobile simulerar långsam 3G och stryper din CPU 6 gånger långsammare än normalt.Tänk på att strypningen är i förhållande till den normala kapaciteten hos din bärbara eller stationära dator.

Observera att gasreglaget kommer att döljas om enhetens Verktygsfält är smal.

Strypa CPU endast

för att strypa CPU bara och inte nätverket, gå till Prestandapanelen, clickCapture Inställningar , och välj sedan4x avmattning eller 6x avmattning från CPU-listan.

Strypa nätverket endast

för att strypa nätverket och inte CPU, gå Nätverkspanelen och väljsnabb 3G eller långsam 3G från Gaslistan.,

Eller genom att trycka på Kommando+Skift+P (Mac) eller ctrl+Skift+P (Windows, Linux och Chrome OS) för att öppna Kommando-Menyn, skriv 3G och markera Aktivera snabb 3G-strypning orEnable långsam 3G-strypning.

Du kan också ställa in nätverksbrytning från Prestandapanelen., ClickCapture Inställningar och sedanvälj snabb 3G eller långsam 3G från nätverkslistan.

figur 21. Ställa in nätverksbrytning från Prestandapanelen

åsidosätta geolocation

för att öppna geolocation overriding UI klicka på Anpassa och kontrollera DevTools och välj sedanmer verktyg> sensorer.

Välj en av de förinställda från Geolocation listan eller välj Anpassad locationto skriva in dina egna koordinater, eller välj en Plats tillgänglig för att testa hur yourpage beter sig när geolocation är i fel tillstånd.

Set orientation

To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.

Välj en av förinställningarna från Orienteringslistan eller Välj anpassad orienteringför att ställa in dina egna alfa -, beta-och gammavärden.

Feedback

var den här sidan till hjälp?

vad var det bästa med den här sidan?

det hjälpte mig att slutföra mitt mål

Tack för feedbacken., Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

den hade den information jag behövde