Page 140 - Guida tascabile HTML5

alternativa, più versatile ma per ora meno supportata, basata sui simboli matematici
maggiore > minore < e uguale = con espressioni del tipo (width > 1920px).

Dimensioni del riquadro

Iniziamo ad elencare le condizioni che fanno riferimento alle dimensioni del

dispositivo su cui sarà visualizzato il contenuto.

width fa riferimento alla larghezza in pixel del riquadro in cui viene
visualizzato il contenuto.

height fa riferimento all’altezza in pixel del riquadro in cui viene visualizzato

il contenuto.

orientation fa riferimento all’orientamento del dispositivo utilizzato, e accetta
solo i valori verticale (orientation:portrait) o orizzontale

(orientation:landscape): quando l’utente ruota uno smartphone è possibile, per

esempio, apportare modifiche mirate al layout per sfruttare al meglio lo
spazio.

aspect-ratio fa riferimento al rapporto tra larghezza e altezza del riquadro di

visualizzazione, è possibile specificare valori come, per esempio, aspect-

ratio:16/9 o aspect-ratio:4/3: può essere utile per siti legati all’ambito

fotografico, dove è necessario curare la composizione delle pagine.

NOTA Queste proprietà sono legate al riquadro in cui è visualizzato il contenuto, non
alle dimensioni totali del display: questa differenziazione è senz’altro più significativa
su un computer desktop.

Qualità del display

È possibile fare riferimento anche a caratteristiche intrinseche del display, che

aiutano a identificare il tipo di dispositivo anche nelle situazioni più varie.

resolution fa riferimento alla densità di pixel del display: prevede un valore
espresso in dpi (dots per inch) o, molto meno diffuso, dpcm (dots per

centimeter).

scan è legato a dispositivi di tipo tv, e fa riferimento alla tecnologia di refresh
dell’immagine: progressive o interlace.

grid, che prevede il valore 1 quando attivo, permette di individuare i

dispositivi che non si basano su pixel, ma su una griglia di caratteri