Relativamente all’emulazione delle diverse caratteristiche di un dispositivo mobile gli strumenti per sviluppatori di Chrome mettono a disposizione dell’utente una serie di opzioni preconfigurate che verranno settate in automatico dal browser stesso selezionando semplicemente il modello di dispositivo che si intende emulare.

In questo senso quindi è sufficiente selezionare lo specifico device da emulare selezionandolo tra la lista dei modelli presenti all’interno del campo Device

Selezionando uno dei modelli presenti all’interno di questa lista, Chorme andrà poi a configurare l’emulatore in maniera completamente automatica settando tutti i parametri e le caratteristiche necessarie per emulare il dispositivo scelto. In particolare verranno automaticamente configurati:

• Lo User Agent utilizzato normalmente dal corrispondente dispositivo per identificarsi e effettuare le sue richieste.

Lo User Agent altro non è se non una stringa di testo che viene inviata dal browser client nell’intestazione delle richieste HTTP al server web per consentirgli di individuare esattamente chi è che ha effettuato questo tipo di richiesta mettendo quindi il server web nelle condizioni di poter fornire una riposta e dei contenuti corretti proprio in base al tipo di browser e/o di dispositivo che li ha richiesti.

• La risoluzione e il pixel ratio del dispositivo
• L’abilitazione (se presente nel corrispondente dispositivo) delle gesture e degli eventi touch
• L’emulazione della scrollbar mobile
• L’auto-dimensionamento del testo per le pagine web prive di un viewport definito

ATTEZIONE! Come indicato da Chrome stesso, una volate selezionato lo specifico dispositivo da emulare, e settate di conseguenza le relative impostazione dell’emulatore è sempre necessario ricaricare la pagina web per applicare effettivamente le impostazioni settate e vedere quindi come il nostro sito risulterebbe in quello specifico device

I vari pulsanti presenti immediatamente al di sotto della combo box di selezione del dispositivo ci consentono poi di variare alcune impostazioni e caratteristiche dell’emulatore.

In particolare:

• Il primo checkbox sulla sinistra consente di abilitare/disabilitare l’emulazione della risoluzione dello schermo (nell’esempio di figura 375px X 667px) del dispositivo selezionato

• I numeri presenti nel successivo campo indicano la risoluzione, in pixel, dello schermo del dispositivo prescelto e, come detto, sono settati in automatico da Chorme stesso proprio sulla base del particolare dispositivo selezionato. E’ comunque possibile in un qualsiasi momento variare questo preset modificando manualmente le dimensioni dello schermo che si desidera emulare. Per far questo è sufficiente cliccare sulla specifica dimensione che si intende variare e inserire manualmente il valore desiderato.

• L’icona raffigurante due piccole frecce circolari consente di invertire le dimensioni dell’altezza dello schermo del dispositivo con quelle della larghezza emulando di fatto quello che si verificherebbe ruotando il dispositivo mobile e passando quindi dalla visualizzazione portrait a quella in landscape

• Il campo successivo rappresentato da due piccole frecce racchiuse all’interno di un quadratino consente di variare le impostazione del Device Pixel Ratio in modo tale da poter emulare quello che sarebbe il comportamento e la visualizzazione del nostro sito su di un dispositivo con display Retina (Il Device Pixel Ratio – DPR – è il rapporto tra i pixel logici e quelli fisici del dispositivo, per maggiori informazioni in merito è possibile consultare anche l’apposita sezione del manuale Passweb)
• Il parametro Fit, infine, non è una vera e propria opzione di emulazione e non ha quindi alcun effetto sulle caratteristiche del dispositivo mobile che si intende simulare. Nello specifico questa opzione consente semplicemente di garantire che lo schermo del dispositivo emulato sia sempre visibile all’interno della finestra del browser, autoridimesionandosi in automatico se aumentiamo o diminuiamo lo spazio disponibile per la finestra dei Developer Tool

I parametri di configurazione appena esaminati possono essere modificati anche all’interno della sezione Device del pannello Emulation, come evidenziato in figura

Il pulsante “Save As” presente all’interno di questa sezione permette di salvare eventuali variazioni apportate alla configurazione in un nuovo preset da poter poi richiamare al bisogno.

Operando sempre all’interno del pannello Emulation è inoltre possibile intervenire anche su altri parametri di configurazione dell’emulatore. In particolare:

• All’interno della sezione “Media” è possibile selezionare lo specifico tipo di media (es. Stampanti) che dovrebbe essere emulato

Questo parametro di configurazione risulta quindi utile nel caso in cui il nostro sito utilizzi fogli di stile diversi per diversi tipi di media, ad esempio un foglio di stile specifico per la stampa della pagina web. Selezionando uno specifico tipo di media il browser caricherà i relativi fogli di stile e potremo quindi visualizzare nell’emulatore come risulterà il nostro sito su quello specifico tipo di media.

• All’interno della sezione Network è possibile settare le impostazioni di configurazione relative a diverse possibili condizioni di connettività per verificare principalmente le performance del sito in condizioni di effettiva navigazione mobile

ATTENZIONE! Queste stesse impostazioni possono essere settate anche operando all’interno del pannello Network presente nella parte alta dell’emulatore

Selezionando ad esempio l’opzione “Regular 3G” o “Regular 4G“ potremo testare il comportamento e le performance del nostro sito in condizioni rispettivamente di effettiva connettività mobile su rete 3G o 4G

• All’interno del pannello Sensor, infine, è possibile abilitare o disabilitare l’emulazione di eventuali sensori presenti sul dispositivo mobile selezionato come ad esempio i sensori per le gesture touch, per la geolocalizzazione per l’accelerometro ecc…

Il pannello che verrà abilitato cliccando su questa icona è suddiviso in altri tre distinti pannelli tra cui anche il pannello Console precedentemente esaminato. Quello che a noi interessa in questo caso è ovviamente il pannello Emulation che, come evidenziato nella figura sopra riportata, è suddiviso in altre 4 distinte sezioni ciascuna delle quali consente, in generale, di emulare determinate caratteristiche di un dispositivo mobile.

Vediamo quindi nel dettaglio cosa è possibile fare all’interno di ciascuna di queste 4 sezioni: