Simula Dispozitive Mobile cu Dispozitiv de Modul în Chrome DevTools

De Kayce Basci
Scriitor Tehnic, Chrome DevTools & Far

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.

Figura 1., Dispozitivul de Instrumente

î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.

Figura 2., Mânerele pentru schimbarea viewport dimensiunile atunci când în Receptiv Viewport Modul

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.

Figura 3. Show interogări mass-media

faceți Clic pe un punct de întrerupere pentru a schimba vizualizare lățime, astfel încât breakpoint se declanșat.

Figura 4., Faceți clic pe un punct de întrerupere pentru a schimba vizualizare lățime

Setați tipul de dispozitiv

Utilizarea Dispozitivului Tip listă pentru a simula un dispozitiv mobil sau desktop a dispozitivului.

Figura 5. Aparatul de Tip listă

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″>

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.,

Figure 6. The Device list

Rotate the viewport to landscape orientation

Click Rotate to rotate the viewport to landscape orientation.

Figure 7. Landscape orientation

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

Figure 8., Bara de instrumente a dispozitivului

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.

Figura 9. Show-cadru dispozitiv
Figura 10., Dispozitivul cadru pentru iPhone 6

Adăugați un obicei dispozitiv mobil

Pentru a adăuga un dispozitiv personalizat:

  1. faceți Clic pe Dispozitivul din listă și apoi selectați Editare.

    Figura 11. Selectând Editare

  2. faceți Clic pe Adăugare dispozitiv personalizat.

  3. 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.,

    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 13. Show rulers
Figure 14., Riglele de mai sus și la stânga viewport

Zoom viewport

utilizați lista de Zoom pentru a mări sau micșora.

Figura 15. Zoom

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.

Figura 16., Clapeta de listă

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ă.

Figura 17., Dispozitivul de Instrumente

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.

Figura 18. CPU listă

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.,

Figura 19. Clapeta de listă

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.

Figura 20. Meniul de comandă

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.

Figura 21. Setarea de rețea restrângere de Performanță panou

Override geolocalizare

Pentru a deschide geolocalizare imperative UI faceți clic pe Particularizare și control DevTools și apoi selectMore instrumente > Senzori.

Figura 22., Senzori
Figura 23. Show-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.

Figura 24., Geolocation

Set orientation

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

Figure 25. Sensors
Figure 26., Show-Senzori

Selectați una dintre presetări de Orientare listă sau selectați Personalizat orientationto seta propriile alfa, beta și gama de valori.

Figura 27. Orientare

Feedback

a Fost această pagină de ajutor?
Da
care a fost cel mai bun lucru despre această pagină?
M-A ajutat să-mi finalizez obiectivele
Vă mulțumim pentru feedback., Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.

avea informațiile de care aveam nevoie
Vă mulțumim pentru feedback. Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.

a avut informații exacte
Vă mulțumim pentru feedback. Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.

a fost ușor de citit
Vă mulțumim pentru feedback. Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.,

altceva
Vă mulțumim pentru feedback. Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.

nu
care a fost cel mai rău lucru despre această pagină?
nu m-a ajutat să-mi finalizez obiectivele
Vă mulțumim pentru feedback. Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.

lipseau informațiile de care aveam nevoie
Vă mulțumim pentru feedback., Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.

a avut informații inexacte
Vă mulțumim pentru feedback. Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.

a fost greu de citit
Vă mulțumim pentru feedback. Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.

altceva
Vă mulțumim pentru feedback. Dacă aveți idei specifice despre cum să îmbunătățiți această pagină, vă rugăm să creați o problemă.,

a se vedea Alăturați-vă comunității DevTools pentru alte modalități de a lăsa feedback.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Sari la bara de unelte