I CSS3 hanno introdotto le Media Queries con cui è facile creare layout di tipo responsive. Tuttavia tale caratteristica non ha risolto un problema di fondo: come possiamo tramite CSS indirizzare i nostri stili ad uno specifico dispositivo?
Consideriamo il seguente codice:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
...
}
Questo codice da solo dovrebbe selezionare solo alcuni tipi di tablet, come l'iPad 2. In realtà il codice viene interpretato anche dai dispositivi desktop per via della larghezza minima specificata.
Quindi occorre aggiungere ulteriore codice:
@media only screen
and (min-width : 1224px) {
}
In realtà sarebbe tutto più semplice se le Media Queries accettassero anche il tipo di dispositivo come parametro:
@media only screen
and (device-type: tablet) {
}
@media only screen
and (device-type: smartphone) {
}
In questo modo la selezione sarebbe molto più precisa. Speriamo che al W3C intervengano in tempo.