Testa il tuo sito web su vari dispositivi mobili senza possedere fisicamente i dispositivi

Testa il tuo sito web su vari dispositivi mobili senza possedere fisicamente i dispositivi

⌛ Reading Time: 3 minutes

Man mano che sempre più persone iniziano a navigare sui propri dispositivi mobili, per noi – i webmaster – sta diventando pertinente assicurarci che i nostri siti web vengano visualizzati bene nel browser mobile. Il responsive web design è probabilmente la strada da percorrere, ma richiede comunque molti test per assicurarsi che si adatti bene a tutti i dispositivi e alle dimensioni dello schermo. È quasi impossibile ottenere tutti i dispositivi mobili del mondo, ma con uno strumento ingegnoso nello strumento per sviluppatori di Google Chrome, puoi facilmente testare il tuo sito Web in un ampio elenco di dispositivi mobili (senza spendere un solo centesimo).

L’emulazione “Modalità dispositivo” nello Strumento per sviluppatori di Chrome è uno strumento utile per testare il tuo sito web su più dispositivi mobili. Come suggerisce il nome, emula il browser su vari dispositivi in ​​modo che tu possa vedere come viene visualizzato il tuo sito web in ogni browser.

Per iniziare, apri Chrome e carica il sito web che desideri testare. Premi F12 (“Cmd + Opt + I” per Mac OS X) per aprire lo strumento per sviluppatori. In alternativa, puoi fare clic con il pulsante destro del mouse e selezionare “Ispeziona elemento”.

Nella finestra Strumento per sviluppatori, fai clic sull’icona del cellulare nell’angolo in alto a sinistra.

chrome-toggle-device-mode

Torna alla finestra principale di Chrome e dovresti vedere il sito Web modificato in una modalità griglia.

Chrome-website-in-device-mode

Ora, tutto ciò che devi fare è selezionare il dispositivo mobile nell’elenco a discesa “Dispositivo”. Il sito Web si ridimensionerà automaticamente per adattarsi alle dimensioni dello schermo del dispositivo.

Scorrendo l’elenco dei dispositivi, puoi trovare alcuni dei dispositivi popolari come iPhone 3GS, 4, 5, 6, 6 Plus, Samsung Galaxy Note, ecc.

chrome-device-list-in-device-mode

Altre cose che puoi testare nella modalità dispositivo includono la modifica della risoluzione dello schermo, l’impostazione del rapporto pixel, la modifica dell’agente utente del browser, ecc.

Per uscire dalla “modalità dispositivo”, torna semplicemente alla finestra Strumento per sviluppatori e fai di nuovo clic sull’icona del cellulare, oppure chiudi semplicemente la finestra Strumento per sviluppatori.

Conclusione

Lo strumento per sviluppatori in Google Chrome è uno strumento molto potente e utile per i webmaster e gli sviluppatori per testare ed eseguire il debug dei loro siti web. Esiste uno strumento simile anche in Firefox (in effetti, la maggior parte dei browser è dotata di una modalità strumento per sviluppatori), ma quello in Chrome è dotato di più funzionalità ed è più facile da usare.