Simulare dispositivi mobili con la modalità dispositivo

Utilizza la modalità dispositivo per approssimare l'aspetto e il rendimento della tua pagina su un dispositivo mobile.

Panoramica

Modalità dispositivo è il nome di una raccolta di funzionalità in Chrome DevTools che ti aiutano a simulare i dispositivi mobili. Queste funzionalità includono:

• Simulare una visualizzazione mobile
• Limitare la CPU
• Limitazione della rete
• Inoltre, nel riquadro Sensori:
  • Simulazione della geolocalizzazione
  • Impostazione dell'orientamento

Limitazioni

Considera la modalità dispositivo come un'approssimazione di primo ordine dell'aspetto e dell'esperienza della tua pagina su un dispositivo mobile. Con la modalità dispositivo, il codice non viene eseguito su un dispositivo mobile. Simuli l'esperienza utente mobile dal tuo laptop o computer.

Esistono alcuni aspetti dei dispositivi mobili che DevTools non potrà mai simulare. Ad esempio, l'architettura delle CPU mobile è molto diversa da quella delle CPU per laptop o computer. In caso di dubbio, la cosa migliore è eseguire la pagina su un dispositivo mobile. Utilizza il debug remoto per visualizzare, modificare, eseguire il debug e profilare il codice di una pagina dal tuo laptop o computer mentre viene eseguito su un dispositivo mobile.

Aprire la barra degli strumenti del dispositivo

Per aprire la barra degli strumenti del dispositivo:

1. Apri DevTools.
2. Fai clic su Dispositivi Attiva/disattiva la barra degli strumenti del dispositivo nella barra delle azioni in alto.

Simulare un'area visibile mobile

Per impostazione predefinita, la barra degli strumenti del dispositivo si apre nell'area visibile con Dimensioni impostato su Adattabile. Utilizzando il menu a discesa Dimensioni, puoi simulare le dimensioni di un dispositivo mobile specifico.

Modalità area visibile adattabile

Trascina i punti di manipolazione per ridimensionare il viewport in base alle dimensioni che ti servono. In alternativa, inserisci valori specifici nelle caselle larghezza e altezza. In questo esempio, la larghezza è impostata su 480 e l'altezza su 415.

In alternativa, utilizza la barra dei preset di larghezza per impostare la larghezza con un clic su una delle seguenti opzioni:

Mobile S	Dispositivo mobile medio	Mobile L	Tablet	Laptop	Laptop L	4K
320px	375px	425px	768px	1024px	1440px	2560px

Mostra query supporti

Per mostrare i punti di interruzione delle media query sopra la finestra, fai clic su Altre opzioni > Mostra media query.

Ora DevTools mostra due barre aggiuntive sopra l'area visibile:

• La barra blu con max-width punti di interruzione.
• La barra arancione con min-width punti di interruzione.

Fai clic tra i punti di interruzione per modificare la larghezza dell'area visibile in modo che il punto di interruzione venga attivato.

Per trovare la dichiarazione @media corrispondente, fai clic con il tasto destro del mouse tra i punti di interruzione e seleziona Mostra nel codice sorgente. DevTools apre il riquadro Origini alla riga corrispondente nell'Editor.

Imposta il rapporto pixel del dispositivo

Il rapporto tra pixel del dispositivo (DPR) è il rapporto tra i pixel fisici sullo schermo hardware e i pixel logici (CSS). In altre parole, il DPR indica a Chrome quanti pixel dello schermo utilizzare per disegnare un pixel CSS. Chrome utilizza il valore DPR quando disegna su display HiDPI (High Punti per Pollice).

Per impostare un valore DPR:

1. Fai clic su Altre opzioni > Aggiungi proporzioni pixel del dispositivo.

   

2. Nella barra delle azioni nella parte superiore della finestra, seleziona un valore DPR dal nuovo menu a discesa DPR.

   

Impostare il tipo di dispositivo

Utilizza l'elenco Tipo di dispositivo per simulare un dispositivo mobile o un computer.

Se non riesci a visualizzare l'elenco nella barra delle azioni in alto, seleziona Altre opzioni > Aggiungi tipo di dispositivo.

La tabella seguente descrive le differenze tra le opzioni. Il metodo di rendering indica se Chrome esegue il rendering della pagina come area visibile mobile o desktop. L'icona del cursore si riferisce al tipo di cursore che vedi quando passi il mouse sopra la pagina. Eventi attivati indica se la pagina attiva eventi touch o click quando interagisci con la pagina.

Opzione	Metodo di rendering	Icona del cursore	Eventi attivati
Dispositivi mobili	Dispositivi mobili	Cerchio	touch
Dispositivo mobile (senza tocco)	Dispositivi mobili	Normale	clic
Desktop	Desktop	Normale	clic
Computer (touch)	Desktop	Cerchio	touch

Modalità specifica per il dispositivo

Per simulare le dimensioni di un dispositivo mobile specifico, selezionalo dall'elenco Dimensioni.

Per maggiori informazioni, vedi Aggiungere un dispositivo mobile personalizzato.

Ruota il riquadro in orientamento orizzontale.

Fai clic su screen_rotation Ruota per ruotare la finestra di visualizzazione in orientamento orizzontale.

Tieni presente che il pulsante Ruota scompare se la barra degli strumenti del dispositivo è stretta.

Vedi anche Impostare l'orientamento.

Attiva o disattiva la modalità doppio schermo

Alcuni dispositivi, ad esempio Surface Duo, hanno due schermi e due modi per utilizzarli: con uno o entrambi gli schermi attivi.

Per passare dalla modalità a doppio schermo a quella a schermo singolo e viceversa, fai clic su devices_fold Attiva o disattiva la modalità doppio schermo nella barra degli strumenti.

Impostare la posizione del dispositivo

Alcuni dispositivi, ad esempio Asus Zenbook Fold, hanno schermi pieghevoli. Questi schermi hanno una postura: continua o piegata. La postura continua si riferisce a una posizione "piatta", mentre la postura piegata forma un angolo tra le sezioni del display.

Per impostare la postura del dispositivo, seleziona Continua o Chiuso dal menu a discesa corrispondente nella barra degli strumenti.

Mostra frame del dispositivo

Quando simuli le dimensioni di un dispositivo mobile specifico come Nest Hub, seleziona Altre opzioni > Mostra cornice dispositivo per mostrare la cornice del dispositivo fisico intorno all'area visibile.

In questo esempio, DevTools mostra il frame per Nest Hub.

Aggiungere un dispositivo mobile personalizzato

Per aggiungere un dispositivo personalizzato:

1. Fai clic sull'elenco Dispositivo e seleziona Modifica.

   

2. Nella scheda Impostazioni impostazioni > Dispositivi, scegli un dispositivo dall'elenco di quelli supportati o fai clic su Aggiungi dispositivo personalizzato per aggiungerne uno tuo.

3. Se ne aggiungi uno tuo, inserisci un nome, una larghezza e un'altezza per il dispositivo, poi fai clic su Aggiungi.

   

   I campi Rapporto pixel dispositivo, Stringa user agent e Tipo di dispositivo sono facoltativi. Il campo Tipo di dispositivo è l'elenco impostato su Dispositivo mobile per impostazione predefinita.

4. Nella finestra, seleziona il dispositivo appena aggiunto dall'elenco Dimensioni.

Mostra righelli

Fai clic su Altre opzioni > Mostra righelli per visualizzare i righelli. L'unità di misura dei righelli è il pixel.

DevTools mostra i righelli in alto e a sinistra del viewport.

Fai clic sui righelli in corrispondenza di segni specifici per impostare la larghezza e l'altezza dell'area visibile.

Ingrandire il viewport

Utilizza l'elenco Zoom per aumentare o diminuire lo zoom.

Acquisire uno screenshot

Per acquisire uno screenshot di ciò che vedi nel riquadro, fai clic su Altre opzioni > Acquisisci screenshot.

Per acquisire uno screenshot dell'intera pagina, inclusi i contenuti non visibili nella finestra, seleziona Acquisisci screenshot a grandezza originale dallo stesso menu.

Per includere una cornice del dispositivo quando acquisisci uno screenshot in Modalità specifica per il dispositivo, prima Mostra cornice del dispositivo e poi fai clic su Acquisisci screenshot come indicato in precedenza.

Per scoprire altri modi per acquisire screenshot con DevTools, consulta 4 modi per acquisire screenshot con DevTools.

Limitare la rete e la CPU

Per limitare sia la rete che la CPU, seleziona Dispositivo mobile di fascia media o Dispositivo mobile di fascia bassa dall'elenco Limitazione.

Dispositivo mobile di fascia media simula una connessione 3G veloce e limita la CPU in modo che sia 4 volte più lenta del normale. Dispositivo mobile di fascia bassa simula il 3G lento e limita la CPU a una velocità 6 volte inferiore al normale. Tieni presente che la limitazione è relativa alla normale capacità del tuo laptop o computer.

Tieni presente che l'elenco Throttle verrà nascosto se la barra degli strumenti del dispositivo è stretta.

Limitare solo la CPU

Per limitare solo la CPU e non la rete, vai al pannello Rendimento, fai clic su Impostazioni di acquisizione e poi seleziona Rallentamento 4x, Rallentamento 6x o Rallentamento 20x dall'elenco CPU.

Limita solo la rete

Per limitare solo la rete e non la CPU, vai al riquadro Rete e seleziona 3G veloce o 3G lento dall'elenco Limita.

In alternativa, premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux, ChromeOS) per aprire il menu dei comandi, digita 3G e seleziona Attiva limitazione 3G veloce o Attiva limitazione 3G lenta.

Puoi anche impostare la limitazione della larghezza di banda della rete dal riquadro Rendimento. Fai clic su Impostazioni di acquisizione e poi seleziona 3G veloce o 3G lenta dall'elenco Rete.

Emulare i sensori

Utilizza il pannello Sensori per ignorare la geolocalizzazione, simulare l'orientamento del dispositivo, forzare il tocco e simulare lo stato di inattività.

Le sezioni successive forniscono una rapida panoramica su come ignorare la geolocalizzazione e impostare l'orientamento del dispositivo. Per un elenco completo delle funzionalità, vedi Emulare i sensori del dispositivo.

Esegui l'override della geolocalizzazione

Per aprire l'interfaccia utente di override della geolocalizzazione, fai clic su Personalizza e controlla DevTools e poi seleziona Altri strumenti > Sensori.

In alternativa, premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux, ChromeOS) per aprire il menu Comando, digita Sensors e seleziona Mostra sensori.

Seleziona uno dei preset dall'elenco Posizione o seleziona Altro… per inserire le tue coordinate oppure seleziona Posizione non disponibile per verificare il comportamento della pagina quando la geolocalizzazione è in stato di errore.

Impostare l'orientamento

Per aprire l'interfaccia utente di orientamento, fai clic su Personalizza e controlla DevTools e poi seleziona Altri strumenti > Sensori.

In alternativa, premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux, ChromeOS) per aprire il menu Comando, digita Sensors e seleziona Mostra sensori.

Seleziona una delle impostazioni predefinite dall'elenco Orientamento o seleziona Orientamento personalizzato per impostare i tuoi valori alfa, beta e gamma.