Le Media Queries CSS3 sono alla base del responsive design. Tramite questa caratteristica dei CSS possiamo indirizzare stili specifici a dispositivi come iPad ed iPhone, risolvendo così non pochi problemi di visualizzazione. Vediamo insieme quali Media Queries usare.
Bisogna sempre tenere presente che quando un dispositivo mobile viene ruotato, il browser riorganizza il layout in base alle dimensioni della finestra. Ciò non significa che durante la rotazione avvenga un reload della pagina, ma solo una risistemazione visuale degli elementi (redraw).
Ecco tre Media Queries per iPad e iPhone:
/* iPad (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* iPad (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* iPhone -------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}