MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

Controlli della modalità Visualizzazione flessibile

Lungo la parte alta della finestra in modalità "Visualizzazione flessibile" ci sono cinque controlli:

Chiudi
Termina la modalità "Visualizzazione flessibile" e ritorna alla navigazione normale.
Selezione dimensione
Permette di scegliere un numero preimpostato di combinazioni larghezza x altezza, oppure di definirne una personalizzata.
Orientamento
Alterna l'orientamento verticale ed orizzontale simulando il cambio di orientamento del dispositivo.
Simula gli eventi touch
Attiva/disattiva la simulazione degli eventi touch: quando la simulazione è attivata, gli eventi del mouse vengono tradotti in eventi touch.
Screenshot
Cattura la schermata dell'area. Il salvataggio avviene nella posizione in cui vengono salvati anche gli altri Download.
User Agent personalizzato
Novità da Firefox 47. Immettere una stringa che corrisponde al nome di un User Agent. L'area risulta evidenziata e le richieste verranno effettuate utilizzando la stringa User Agent impostata. Questo è utile quando i siti restituiscono diversi contenuti in base al riconoscimento per mezzo di UA sniffing. Per tornare alla normalità è sufficiente svuotare il campo di testo.

 

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: tassoman
 Ultima modifica di: tassoman,