Utilizarea Dispozitivului în Modul de a aproxima cât de pagina ta arată și funcționează pe un dispozitiv mobil.modul dispozitiv este numele pentru colecția liberă de caracteristici din Chrome DevTools carevă ajută să simulați dispozitivele mobile., Aceste caracteristici includ:
- Simularea unei mobile de vizualizare
- Laminare rețea
- Laminare CPU
- Simularea geolocalizare
- Setare orientare
Limitări
Cred că de Modul Dispozitiv ca o aproximare de ordinul întâi de cum yourpage arata si se simte pe un dispozitiv mobil. Cu modul dispozitiv nu rulați de fapt codulpe un dispozitiv mobil. Simulați experiența utilizatorului mobil de pe laptop sau desktop.există câteva aspecte ale dispozitivelor mobile pe care DevTools nu le va putea simula niciodată., De exemplu, arhitectura procesoarelor mobile este foarte diferită de arhitectura Laptopuluisau procesoare desktop. Când aveți îndoieli, cel mai bun pariu este să rulați efectiv pagina dvs. pe un dispozitiv mobil. Utilizați Depanarea de la distanță pentru a vizualiza, schimba, depana și profilați codul unei pagini de pe laptop sau desktop în timp ce rulează de fapt pe un dispozitiv mobil.
Simula un mobil viewport
faceți Clic pe Comutare Dispozitiv de Instrumente pentru a deschide UI thatenables pentru a simula un mobil viewport.
în mod implicit Aparatul de Instrumente se deschide în Receptiv Viewport Modul.
Mod de vizualizare receptiv
trageți mânerele pentru a redimensiona portul de vizualizare la orice dimensiuni aveți nevoie. Sau introduceți valori specificeîn casetele de lățime și înălțime. În Figura 2, lățimea este setată la 628
și înălțimea este setată la662
.
Show interogări mass-media
Pentru a arăta interogare mass-media puncte de întrerupere deasupra ferestrei, faceți clic pe Mai multe opțiuni și apoi selectați afișare mediaqueries.
faceți Clic pe un punct de întrerupere pentru a schimba vizualizare lățime, astfel încât breakpoint se declanșat.
Setați tipul de dispozitiv
Utilizarea Dispozitivului Tip listă pentru a simula un dispozitiv mobil sau desktop a dispozitivului.
tabelul De mai jos descrie diferențele dintre opțiuni. Metoda de randarese referă la faptul dacă Chrome redă pagina ca un viewport mobil sau desktop. Pictograma cursorse referă la tipul de cursor pe care îl vedeți când treceți peste pagină., Evenimente tras refersto dacă pagina incendii touch
sau click
evenimente atunci când interacționează cu pagina.,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.
consultați și setarea orientării.când simulați dimensiunile unui anumit dispozitiv mobil, cum ar fi un iPhone 6, Deschideți Mai multe Opțiuniși apoi selectați Afișare cadru dispozitiv pentru a afișa cadrul fizic al dispozitivului din jurul portului de vizualizare.
Adăugați un obicei dispozitiv mobil
Pentru a adăuga un dispozitiv personalizat:
-
faceți Clic pe Dispozitivul din listă și apoi selectați Editare.
-
faceți Clic pe Adăugare dispozitiv personalizat.
-
introduceți un nume, lățime și înălțime pentru dispozitiv. Thedevice pixel ratio, user agent string,și câmpuri de tip dispozitiv sunt opționale. Câmpul Tip dispozitiv este lista careeste setat la mobil în mod implicit.,
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 viewport
utilizați lista de Zoom pentru a mări sau micșora.
Clapetei de rețea și CPU
Pentru a clapetei de rețea și CPU, selectați Mid-tier mobil sau Low-end mobilefrom Clapeta de lista.
Mid-tier mobil simulează rapid 3G și reglarea vitezei PROCESORULUI, astfel încât acesta este de 4 timesslower decât în mod normal. Low-end mobile simulează lent 3G și accelereaza CPU 6 ori mai lent decât în mod normal.Rețineți că limitarea este relativă la capacitatea normală a laptopului sau a desktopului. rețineți că lista de accelerație va fi ascunsă dacă bara de instrumente a dispozitivului este îngustă.
Acceleratie CPU doar
La acceleratie CPU și nu numai rețea, du-te la panoul de Performanță, clickCapture Setări , și apoi select4x încetinire sau 6x încetinire de la PROCESOR lista.
Acceleratie numai rețeaua
Pentru a clapetei de rețea și nu numai CPU, du-te la Rețea panou și selectFast 3G sau 3G Lent de la Clapeta de lista.,
Sau apăsați Command+Shift+P (Mac) sau Control+Shift+P (Windows, Linux, sistemul de OPERARE Chrome) pentru a openthe Meniu de Comandă, tastați 3G
și selectați Enable 3G restrângere orEnable lent 3G de strangulare.
De asemenea, puteți seta limitarea rețelei din panoul de performanță., ClickCapture Settings și apoiselectați Fast 3G sau Slow 3G din lista de rețea.
Override geolocalizare
Pentru a deschide geolocalizare imperative UI faceți clic pe Particularizare și control DevTools și apoi selectMore instrumente > Senzori.
Selectați una dintre presetări de Geolocalizare listă sau selectați Personalizat locationto introduceți propriile coordonate, sau selectați Locația disponibil pentru a testa cât de yourpage se comportă atunci când localizarea este într-o stare de eroare.
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
Selectați una dintre presetări de Orientare listă sau selectați Personalizat orientationto seta propriile alfa, beta și gama de valori.
Feedback
a se vedea Alăturați-vă comunității DevTools pentru alte modalități de a lăsa feedback.