Media Queries e Responsive Web Design: Differenza tra width e device-width

Le media queries relative ai CSS permettono di definire delle regole di stile sulla base delle caratteristiche del dispositivo in uso. Quindi possono rappresentare uno strumento fondamentale per applicare i criteri del Responsive Design ovvero in base a differenti tipi di visualizzazione vengano applicati stili CSS diversi.

Sostanzialmente tali stili riguardano tre fattori: larghezza, altezza (nei loro valori minimi e massimi) e orientamento. Ma … chiariamo meglio un quesito fondamentale a livello di media queries. Qual è la vera differenza (in parole povere) tra width e device-width?

Sostanzialmente la width è basata sulla dimensione della finestra del browser, mentre device-width prende invece come riferimento la dimensione del display che non necessariamente corrisponde a quella dell’area di visualizzazione. Vediamo la definizioni tecniche riguardo le due proprietà.


Width

La width descrive la larghezza della superficie di rendering del dispositivo di uscita (ad esempio la larghezza della finestra del browser).

Device width

Descrive la larghezza fisica del dispositivo in uso(cioè la larghezza dell’intero schermo visualizzabile o una pagina , piuttosto che solo l’area di rendering , come la finestra del documento).

La device-width si riferisce alla risoluzione del display (ad es. 1024 di larghezza in una risoluzione di 1024×768 pixel), mentre width si riferisce alla larghezza del browser stesso (che sarà diversa dalla risoluzione del dispositivo se il browser non è ingrandito al massimo). Se la risoluzione fisica dello schermo è abbastanza grande per arrivare ad un “break point” nel responsive design, ma la larghezza del browser è più piccola in modo tale che targetizza un altro “break point”, vi ritroverete in una strana combinazione di entrambi i casi e probabilmente non vedrete alcun risultato o ci sarà qualche malfunzionamento inaspettato.


In conclusione

A meno che non abbiate espressamente bisogno di limitare i fogli di stile in base alla risoluzione fisica del dispositivo e non in base alla dimensione della finestra del browser, è consigliato usare ad esempio min-width mentre cercate di evitare min-device-width. Questo perchè min-device-width non prevede che i contenuti vengano adattati su device che permettono di ridimensionare le finestre, proprio per via del fatto che le media query si basano sulle dimensioni dello schermo del dispositivo e non su quelle delle finestre di riferimento.


Un esempio di media queries

In primo luogo, per poter avere un sito responsive e per poter far fronte alle richieste delle media queries, il meta tag viewport deve essere inserito nella sezione della tua pagina web. La versione standard di base di questo meta tag è mostrata sotto.

Ecco a voi le nostre media queries di esempio:

Come funzionano:

  • 1° media query: se la dimensione del browser è pari ad almeno 980 pixel o superiore lo sfondo sarà rosso.
  • 2° media query: se la dimensione del browser ha una dimensione tra 0 e 979 pixel lo sfondo sarà blue.
  • 3° media query: se la dimensione del browser ha una dimensione tra 0 e 500 pixel lo sfondo sarà verde.