Le interfacce web responsive si adattano a diverse dimensioni di schermo permettendo una presentazione fruibile su dispositivi di tipo diverso, come smartphone o tablet. La Visualizzazione Flessibile permette di visionare facilmente come il proprio sito o applicazione web risulterà su schermi di diverse dimensioni.
La schermata seguente mostra il contenuto di una pagina Wikipedia in versione mobile simulando uno schermo della dimensione di 320x480 pixel.
La Visualizzazione flessibile risulta conveniente perché permette di ridimensionare l'area del contenuto velocemente e con precisione.
Naturalmente potrebbe essere sufficiente soltanto ridimensionare la finestra del browser ma questo comporterebbe il ridimensionamento in piccolo anche delle altre schede in fase di navigazione, rendendo il browser più difficile da usare.
Mentre è attiva la Visualizzazione flessibile su una particolare scheda, è comunque possibile continuare a navigare normalmente i contenuti delle altre schede.
Attivazione e disattivazione
Ci sono tre modi per attivare la Visualizzazione flessibile:
- Selezionare la voce "Visualizzazione flessibile" dal sottomenu "Sviluppo Web" nel menu di Firefox. (oppure menu Strumenti se è attivata la barra menu o si usa il sistema operativo OSX)
- Premere il pulsante "Visualizzazione flessibile nella Toolbar Strumenti di sviluppo
- Premere Ctrl + Shift + M, (oppure Comandi + Opzioni + M su OSX)
e ci sono anche tre modi per disattivare la Visualizzazione flessibile:
- Selezionare nuovamente la voce di menu "Visualizzazione flessibile".
- Cliccare il pulsante "chiudi" posizionato nell'angolo in alto a sinistra della finestra.
- Premere nuovamente Ctrl + Shift + M, (oppure Comandi + Opzioni + M su OSX). Prima di Firefox 34, funzionava anche il tasto escape.
Ridimensionamento
Si può ridimensionare l'area del contenuto in due modi:
- Usando il controllo "Seleziona dimensione"
- Cliccando e trascinando le barre di controllo a destra e in basso l'area del contenuto, oppure trascinando l'angolo in basso a destra
Decidendo di ridimensionare tramite click e trascina, tenendo premuto il tasto CTRL (Command su OSX) è possibile rallentare la velocità di ridimensionamento al fine aumentare la precisione per scegliere la dimensione giusta.