Utilizzare il Dispositivo in Modalità di approssimare come la pagina si presenta e si esegue su un dispositivo mobile.
Modalità dispositivo è il nome per la raccolta di funzionalità in Chrome DevTools cheaiuta a simulare i dispositivi mobili., Queste caratteristiche includono:
- la Simulazione di un mobile di visualizzazione
- Limitazione di rete
- la Limitazione della CPU
- la Simulazione di geolocalizzazione
- orientamento
Limitazioni
Pensare a Modalità del Dispositivo, come un primo ordine di approssimazione di come yourpage guarda e si sente su un dispositivo mobile. Con la modalità dispositivo in realtà non esegui il tuo codicesu un dispositivo mobile. È possibile simulare l’esperienza utente mobile dal vostro computer portatile o desktop.
Ci sono alcuni aspetti dei dispositivi mobili che DevTools non sarà mai in grado di simulare., Per esempio, l’architettura delle CPU mobili è molto diversa dall’architettura delle CPU desktop laptopor. In caso di dubbio, la soluzione migliore è quella di eseguire effettivamente la tua pagina su un dispositivo mobile. Usa il debug remoto per visualizzare, modificare,eseguire il debug e profilare il codice di una pagina dal tuo laptop o desktop mentre viene effettivamente eseguito su un dispositivo mobile.
Simula una finestra mobile
Fare clic su Attiva / Disattiva la barra degli strumenti del dispositivo per aprire l’interfaccia utente che consente di simulare una finestra mobile.
Per impostazione predefinita la barra degli strumenti del dispositivo si apre in modalità Finestra reattiva.
Modalità finestra reattiva
Trascina le maniglie per ridimensionare la finestra a qualsiasi dimensione tu abbia bisogno. Oppure, inserisci valori specificinelle caselle larghezza e altezza. Nella Figura 2, la larghezza è impostata su 628 e l’altezza è impostata su662.
Mostra media query
Per mostrare i punti di interruzione della query media sopra la finestra, fare clic su Altre opzioni e quindi selezionare Mostra mediaqueries.
Fare clic su un punto di interruzione per modificare la larghezza della finestra in modo che il punto di interruzione venga attivato.
Impostare il tipo di dispositivo
Utilizzare l’elenco dei tipi di dispositivo per simulare un dispositivo mobile o desktop.
La tabella seguente descrive le differenze tra le opzioni. Metodo di rendereriferisce se Chrome esegue il rendering della pagina come finestra mobile o desktop. Icona del cursoresi riferisce al tipo di cursore che vedi quando passi il mouse sopra la pagina., Gli eventi attivati si riferiscono se la pagina attiva eventitouch oclick quando si interagisce con la 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.
Vedere anche Imposta orientamento.
Mostra frame del dispositivo
Quando si simulano le dimensioni di un dispositivo mobile specifico come un iPhone 6, aprire altre opzioni e quindi selezionare Mostra frame del dispositivo per mostrare il frame del dispositivo fisico attorno alla finestra.
Aggiungi un dispositivo mobile personalizzato
Per aggiungere un dispositivo personalizzato:
-
Fai clic sull’elenco dei dispositivi e quindi seleziona Modifica.
Figura 11. Selezionando Modifica -
Fare clic su Aggiungi dispositivo personalizzato.
-
Immettere un nome, una larghezza e un’altezza per il dispositivo. I campi Rapporto pixel dispositivo, stringa agente utente e tipo dispositivo sono facoltativi. Il campo tipo di dispositivo è l’elenco cheè impostato su Mobile per impostazione predefinita.,
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.
Zoom la finestra
Utilizzare l’elenco Zoom per ingrandire o ridurre.
Throttle la rete e CPU
Per throttle la rete e CPU, selezionare Mid-tier mobile o Low-end mobilefrom la lista della valvola a farfalla.
Mid-tier mobile simula veloce 3G e strozzature la CPU in modo che sia 4 timesslower rispetto al normale. Low – end mobile simula lento 3G e strozzature la CPU 6 volte più lento del normale.Tieni presente che la limitazione è relativa alla normale capacità del tuo laptop o desktop.
Si noti che la lista dell’acceleratore sarà nascosta se la barra degli strumenti del dispositivo è stretta.
Throttle la CPU solo
Per throttle la CPU solo e non la rete, andare al pannello delle prestazioni, fare clic su Impostazioni di cattura
, e quindi selezionare 4x rallentamento o 6x rallentamento dalla lista CPU.
Throttle la rete solo
Per throttle la rete solo e non la CPU, andare il pannello di rete e selectFast 3G o lento 3G dalla lista della valvola a farfalla.,
O premere Command+Shift+P (Mac) o Control+Shift+P (Windows, Linux, Chrome OS) per aprire il menu dei comandi, digitare3G, e selezionare Abilita veloce 3G throttling orEnable lento 3G throttling.
È anche possibile impostare la limitazione di rete dal pannello Prestazioni., Fare clic su Impostazioni di cattura e quindi selezionare Fast 3G o Slow 3G dall’elenco di rete.
Override di geolocalizzazione
Per aprire la geolocalizzazione override interfaccia utente di fare clic su Personalizza e controllo DevTools
e poi selezionare altre strumenti > Sensori.
Seleziona uno dei preset dall’elenco di geolocalizzazione, oppure seleziona Posizione personalizzataper inserire le tue coordinate, oppure seleziona Posizione non disponibile per verificare come si comporta la tua pagina quando la geolocalizzazione è in stato di errore.
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
Selezionare uno dei preset dall’elenco Orientamento o selezionare Orientamento personalizzatoper impostare i propri valori alfa, beta e gamma.
Feedback
Vedi Unisciti alla comunità DevTools per altri modi per lasciare feedback.