Gli sviluppatori web spesso hanno bisogno di emulare risoluzione display con Chrome, il browser più utilizzato al mondo.
In questo articolo vedrai come emulare la risoluzione del display di smartphone, tablet e qualunque schermo di PC.
Indice
Emulare risoluzione display Chrome: strumento per sviluppatori
Gli strumenti per sviluppatori di Google Chrome offrono numerosi mezzi per analizzare pagine web.
Tra i vari strumenti offerti, puoi trovare lo strumento per emulazione di dispositivo.
Ecco una lista dei passi da compiere per aprire lo strumento di emulazione di dispositivo:
- Apri lo strumento per sviluppatori di Chrome (tasto destro -> Ispeziona)
- Clicca sul pulsante che trovi in figura
- Seleziona il dispositivo da emulare nel menu a tendina
Troverai il processo completo nel video mostrato nei paragrafi seguenti.
Emulare risoluzione display Chrome: progetto di esempio
Per darti modo di verificare come utilizzare lo strumento di emulazione di dispositivo di Chrome, ho creato una semplice applicazione web di esempio.
In questa applicazione utilizzo Bootstrap e Font Awesome per mostrarti una icona coerente con il dispositivo “rilevato”.
La “rilevazione” è basata sulla risoluzione dello schermo del dispositivo utilizzato (reale o emulato) per visualizzare l’applicazione web.
Link al progetto
Puoi trovare e scaricare il progetto sulla repository GitHub.
Emulare display smartphone: video dimostrativo
In questa sezione puoi consultare il video dove utilizzo il progetto citato per fornire un esempio pratico di utilizzo dello strumento di emulazione di dispositivo di Chrome.
Se questo video fosse stato di tuo interesse, potresti valutare di iscriverti al canale.
Approfondimenti
In questo sito sono presenti numerosi contenuti relativi allo sviluppo web.
Eccone alcuni:
- Bloccare richieste rete con Google Chrome
- Network conditions Chrome: a cosa serve?
- Come fare una chiamata AJAX ( GET / POST )
- TypeScript: cosa è? Perché si usa?
- RxJS cosa è e dove viene utilizzata
Conclusioni
In questo articolo hai avuto modo di apprendere come emulare risoluzione display utilizzando Chrome.
Se volessi approfondire ulteriormente, puoi consultare l’articolo su Chrome developers.
