![](https://developers.google.com/web/images/contributors/kaycebasques.jpg)
A Készülék Mód, hogy hozzávetőleges, hogy az oldal úgy néz ki, majd végrehajtja a mobil eszközön.
az eszköz mód a Chrome DevTools laza funkciógyűjteményének neve, amelysegít a mobil eszközök szimulálásában., Ezek a funkciók a következők:
- Szimuláló mobil látkép
- Fojtás a hálózati
- Fojtás a CPU
- Szimuláló térinformatikai
- tájolását
Korlátozások
Hiszem, hogy a Készülék Mód, mint egy elsőrendű közelítés, hogy yourpage olyan, egy mobil eszközön. Az eszköz módban valójában nem futtatja a kódjátegy mobil eszközön. Szimulálja a mobil felhasználói élményt laptopjáról vagy asztaláról.
a mobil eszközöknek vannak olyan szempontjai, amelyeket a DevTools soha nem képes szimulálni., Forexample, a mobil CPU-k architektúrája nagyon különbözik a laptopor asztali CPU-k architektúrájától. Ha kétségei vannak, a legjobb megoldás az, ha ténylegesen futtatja az oldalt egy mobil eszközön. A távoli hibakeresés segítségével megtekintheti, módosíthatja,hibakeresheti és profilozhatja az oldal kódját laptopjáról vagy asztaláról, miközben valójában mobil eszközön fut.
mobil nézetport szimulálása
kattintson a Toggle Device Toolbar elemre a mobil nézetport szimulálásához szükséges felhasználói felület megnyitásához.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/device-toolbar.png)
alapértelmezés szerint az eszköztár érzékeny nézetablakban nyílik meg.
reszponzív nézetablak mód
húzza a fogantyúkat a nézetablak átméretezéséhez bármilyen méretre. Vagy adjon meg konkrét értékeketszéles-magasságú dobozokban. A 2.ábrán a szélesség 628
értékre van állítva, a magasság pedig662
értékre van állítva.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/responsive-handles.png)
Show média lekérdezések
mutatni media query határértékek felett a látkép, kattintson a További lehetőségek elemre, majd válassza a Show mediaqueries.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/show-media-queries.png)
kattintson egy töréspontra a nézetablak szélességének megváltoztatásához, hogy a töréspont aktiválódjon.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/breakpoint.png)
állítsa be az eszköz típusát
használja az eszköztípus listát mobil eszköz vagy asztali eszköz szimulálásához.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/device-type.png)
az alábbi táblázat a lehetőségek közötti különbségeket írja le. Rendering methodre utal, hogy a Chrome teszi az oldalt, mint egy mobil vagy asztali nézetport. Kurzor ikonutal arra, hogy milyen típusú kurzort látsz, amikor az egérmutatót az oldal fölé viszi., A kirúgott események hivatkoznak arra, hogy az oldal tüzel-e touch
vagy click
események, amikor kölcsönhatásba lép az oldallal.,id=”b8e8c2fed7″>
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.,
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/device-list.png)
Rotate the viewport to landscape orientation
Click Rotate to rotate the viewport to landscape orientation.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/landscape.png)
Note that the Rotate button disappears if your Device Toolbar is narrow.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/device-toolbar.png)
Lásd még a beállítási tájolást.
Show készülék keret
Ha szimulálva a méretei egy adott mobil eszközön, mint egy iPhone 6, Több optionsand akkor válasszuk a Térkép készülék keret mutatni a fizikai eszköz keret körül a látkép.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/show-device-frame.png)
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/iphone-frame.png)
egyéni mobileszköz hozzáadása
egyéni eszköz hozzáadásához:
-
kattintson az Eszközlistára, majd válassza a Szerkesztés lehetőséget.
11.ábra. A Szerkesztés -
kattintson az egyéni Eszköz hozzáadása elemre.
-
adja meg a készülék nevét, szélességét és magasságát. Az eszköz képpontaránya, a felhasználói ügynök karakterlánca és az eszköztípus mezői nem kötelezőek. Az eszköz típusa mező a lista, amely alapértelmezés szerint mobilra van állítva.,
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.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/show-rulers.png)
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/rulers.png)
nagyítsa a nézetablakot
a nagyítási lista segítségével nagyítson vagy kicsinyítsen.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/zoom-viewport.png)
A hálózat és a CPU
a hálózat és a CPU fojtásához válassza a középszintű mobil vagy az alacsony végű mobilt a fojtószelep listájából.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/throttling.png)
a középszintű mobil gyors 3G-t szimulál, és a CPU-t úgy fojtja meg, hogy 4-szer kisebb legyen, mint a normál. Low-end mobil szimulálja lassú 3G fojtja a CPU 6-szor lassabb, mint a normál.Ne feledje,hogy a fojtás a laptop vagy az asztal normál képességéhez viszonyítva van.
vegye figyelembe, hogy a fojtószelep lista el lesz rejtve, ha az eszköztár keskeny.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/device-toolbar.png)
Gázt a CPU csak
A gázt a CPU csak nem a hálózathoz, akkor a Teljesítmény panel, clickCapture Beállítások , majd select4x lassulás vagy 6x lassulás a CPU lista.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/cpu.png)
Gázt a hálózat csak
korlátozza a hálózat csak nem a CPU, a Hálózat panel selectFast 3G vagy 3G Lassú a Gázt lista.,
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/network.png)
vagy nyomja meg a Command+Shift+P (Mac) vagy a Control+Shift+P (Windows, Linux, Chrome OS) gombot a megnyitáshoza parancs menü, írja be a 3G
parancsot, majd válassza a gyors 3G fojtás engedélyezése vagy lassú 3G fojtás.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/commandmenu.png)
hálózati fojtást is beállíthat a teljesítmény panelen., ClickCapture Beállítások majdválasszon gyors 3G vagy lassú 3G-t a hálózati listáról.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/network2.png)
felülbírálja a helymeghatározást
a helymeghatározás megnyitásához nyomós UI kattintson a testreszabás és a vezérlő DevTools majd válassza ki a selectMore tools > érzékelőket.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/sensors.png)
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/show-sensors.png)
válassza ki a helymeghatározási lista egyik készletét, vagy válassza az egyéni helyetbelépni a saját koordinátáit, vagy válassza ki a nem elérhető helyet annak teszteléséhez, hogyan viselkedik a webhely, ha a földrajzi helymeghatározás hibaállapotban van.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/geolocation.png)
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/sensors.png)
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/show-sensors.png)
válassza ki a beállítási listából az egyik előre beállított értéket, vagy válassza az egyéni orientációthogy beállítsa saját alfa -, béta-és gamma-értékeit.
![](https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/orientation.png)
visszajelzés
lásd: csatlakozzon a DevTools közösséghez más módokon, hogy visszajelzést hagyjon.