Utilizzare i browser per visualizzare i siti a diverse risoluzioni
I browser di ultima generazione per client desktop o notebook offrono strumenti integrati per modificare la risoluzione con cui visualizzare i siti web e nel caso di layout responsive è possibile analizzare il comportamento delle pagine a diverse risoluzioni, in modo da modificare gli stili secondo i nuovi selettori forniti dai CSS3, personalizzando la visualizzazione degli elementi della pagina a seconda del monitor su cui vengono renderizzati.
Sia Chrome che Mozilla Firefox offrono la possibilità di modificare la risoluzione grazie ai tool interni, ma in questo articolo vedremo in particolare le funzionalità offerte dal browser Firefox, su sistema operativo Microsoft.
In particolare con il client della Mozilla, per visualizzare una pagina web a risoluzioni differenti, possiamo:
- Dal menù selezionare Strumenti >> Sviluppo web >> Visualizzazione flessibile (e se non compare il menù ricordatevi di premere il tasto ALT)
- Premere direttamente i tasti di scelta rapida CTRL + SHIFT + M
Come vedrete la visualizzazione dell’area si ridimensionerà in funzione della risoluzione selezionata nella input in alto. Per modificare le diverse risoluzioni non dovrete fare altro che selezionarne una nuova dal menù a discesa.
Così facendo però non possiamo modificare lo user-agent, ma solo la risoluzione. Per risolvere questo inconveniente ci viene in aiuto una estensione aggiuntiva del browser.
Firefox e l’estensione User Agent Switcher
Un componente molto utile, per poter modificare lo user-agent senza dover cambiare browser o device, è una estensione per Firefox, dal nome User Agent Switcher, di cui potete trovare maggiori informazioni sul sito di riferimento.
Questa estensione aggiunge la possibilità di scegliere con che user-agent visualizzare una determinata pagina web. Vediamo insieme come installarla, come utilizzarla e come aggiungere ulteriori user-agent alla scarna lista fornita di default.
Come installare User Agent Switcher
Una volta aperto Firefox dirigiti al link dedicato e premi sul bottone Aggiungi a Firefox. Clicca poi, nel box che si aprirà, sul bottone Installa e aspetta che si completi il processo, che potrebbe richiedere un riavvio di Firefox.
Una volta aggiunta l’estensione ti consiglio di inserirla al menù e per far questo non dovrai fare altro che premere con il bottone destro del tuo mouse sulla barra degli strumenti in alto e selezionare Personalizza dal menù che appare.
Nella finestra che comparirà clicca sull’icona con label Default User Agent e tenendo premuto il tasto sinistro trascina l’icona dove vuoi farla comparire. Io l’ho inserita sul menù sempre visibile in alto in modo da potervi fare accesso velocemente. Premi poi sul bottone in basso a destra Termina personalizzazione.
Come cambiare lo user-agent
Una volta installata questa estensione per poter modificare lo user-agent con cui viene visualizzata la pagina non si dovrà fare altro che:
- Dal menù selezionare Strumenti >> Default User Agent >> user-agent che si intende utilizzare
Premere sull’icona dello strumento e selezionare lo user-agent con cui si vuole renderizzare la pagina.
Attenzione: la modifica non avviene in tempo reale e una volta selezionato lo user-agent desiderato sarà necessario aggiornare la pagina.
