Brug-Enhed-Tilstand til at tilnærme hvordan din side ser ud og udfører på en mobil enhed.
enhedstilstand er navnet på den løse samling af funktioner i Chrome DevTools thathjælpe dig med at simulere mobile enheder., Disse funktioner omfatter:
- Simulerer en mobil vindue
- Kvæle nettet
- Neddrosling af CPU ‘
- Simulering af geolocation
- Indstilling orientering
Begrænsninger
Tænk på Enheden Mode, som et første ordens tilnærmelse af, hvordan yourpage ser ud og føles på en mobil enhed. Med enhedstilstand kører du faktisk ikke din kodepå en mobilenhed. Du simulerer den mobile brugeroplevelse fra din bærbare eller stationære.
Der er nogle aspekter af mobile enheder, som DevTools aldrig vil kunne simulere., Foreamample, arkitekturen af mobile CPU ‘er er meget anderledes end arkitekturen af laptopor desktop CPU’ er. Når du er i tvivl, er din bedste chance faktisk at køre din side på en mobilenhed. Brug fjernfejlfinding til at se, ændre,debugge og profilere en sides kode fra din bærbare eller stationære computer, mens den faktisk kører på en mobilenhed.
Simulere en mobil vindue
Klik på Slå Enheden Værktøjslinje for at åbne UI thatenables dig til at simulere en mobil vindue.
Som standard åbnes Enhedsværktøjslinjen i responsiv visningstilstand.
responsiv visningstilstand
træk håndtagene for at ændre størrelsen på visningen til de dimensioner, du har brug for. Eller indtast specifikke værdieri boksene bredde og højde. I figur 2 er bredden indstillet til 628
og højden er indstillet til662
.
Vis medier forespørgsler
for At vise medier forespørgsel breakpoints over din viewport, klik på Flere indstillinger, og vælg derefter Vis mediaqueries.
Klik på et breakpoint for at ændre visningsportens bredde, så breakpoint bliver udløst.
Indstil Enhedstype
Brug listen Enhedstype til at simulere en mobilenhed eller stationær enhed.
tabellen nedenfor beskriver forskellene mellem indstillingerne. Rendering metodehenviser til, Om Chrome gør siden som en mobil eller desktop vie .port. Markørikonhenviser til hvilken type markør du ser, når du holder musepekeren over siden., Begivenheder fyret refererer til, om siden brande touch
eller click
begivenheder, når du interagerer med siden.,id=”b8e8c2fed7″>
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 også Indstil Orientering.
Vis enhedsramme
Når du simulerer dimensionerne på en bestemt mobilenhed som en iPhone 6, skal du åbne flere mulighederog vælg derefter Vis enhedsramme for at vise den fysiske enhedsramme omkring visningsporten.
Tilføj en brugerdefineret mobile enhed
for At tilføje en brugerdefineret enhed:
-
Klik på den liste over enheder, og vælg derefter Rediger.
-
Klik på Tilføj brugerdefineret enhed.
-
indtast et navn, bredde og højde for enheden. Thedevice pi .el ratio, user agent string,og enhedstype felter er valgfri. Feltet enhedstype er listen somer indstillet til mobil som standard.,
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.
Zoom visningsporten
brug Zoomlisten til at .oome ind eller ud.
Gashåndtaget netværket og CPU
At kvæle nettet, og CPU ‘ en, vælg Mid-tier mobil eller Low-end mobilefrom Gashåndtaget liste.
Mid-tier mobile simulerer hurtig 3G-og kvæler din CPU, så det er 4 timesslower end normalt. Lo. – end mobil simulerer langsom 3G og dæmper din CPU 6 gange langsommere end normalt.Husk, at throttling er i forhold til den normale kapacitet på din bærbare eller stationære computer.
Bemærk, at Throttle-listen vil blive skjult, hvis enhedens værktøjslinje er smal.
Gashåndtaget CPU kun
for At gashåndtaget CPU og ikke netværket, skal du gå til den Performance panel, clickCapture Indstillinger , og derefter select4x afmatning eller 6x opbremsning fra CPU-liste.
Gashåndtaget netværket kun
At kvæle netværket og ikke kun CPU ‘ en, skal du gå Netværket panel og selectFast 3G eller Langsom 3G fra Gashåndtaget liste.,
Eller tryk på Command+Skift+P (Mac) eller Ctrl+Shift+P (Windows, Linux, Chrome OS) for at åbnede Kommando i Menuen, type 3G
, og vælg Aktivér hurtig 3G-regulering orEnable langsom 3G-regulering.
Du kan også indstille netværksdrottling fra Præstationspanelet., ClickCapture Settings og vælg derefter Fast 3G eller Slo.3G fra netværkslisten.
Tilsidesætte geolocation
for At åbne geolocation overordnede UI klikke på Tilpas og kontrol DevTools og så selectMore værktøjer > Sensorer.
Vælg en af forhåndsindstillingerne fra Geolocation listen, eller vælg Brugerdefineret locationto indtaste dine egne koordinater, eller vælg Placering utilgængelige for at afprøve, hvordan yourpage opfører sig, når geolocation er i en fejltilstand.
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
Vælg en af forhåndsindstillingerne fra Orientering listen, eller vælg Brugerdefineret orientationto sæt dit eget alfa -, beta-og gamma-værdier.
Feedback
se Deltag i DevTools-samfundet for andre måder at give feedback på.