CSS: Media Queries per iPad

Gli stili specifici per iPad possono essere assegnati tramite le Media Queries CSS3. Di norma questi stili cambiano in base all'orientamento dato al dispositivo. Vediamo in dettaglio tre media queries specifiche.

Le tre media queries sono le seguenti:

@media only screen and (device-width: 768px) {
  /* Generico */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* Portrait */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* Landscape */
}

La seconda e la terza queries possono essere riscritte come:

@media only screen and (orientation:portrait) {
  /* Portrait */
}

@media only screen and (orientation:landscape) {
  /* Landscape */
}

Safari Mobile effettua un reflow della pagina ad ogni cambiamento di orientamento del dispositivo. Ciò significa che i nuovi stili vengono applicati ad ogni reflow di pagina.