CSS: come le Media Queries gestiscono l'orientamento del dispositivo

Le Media Queries CSS interpretano l'orientamento del dispositivo in un modo completamente diverso se facciamo riferimento alle API JavaScript. Le specifiche CSS affermano che l'orientamento è determinato solo dal rapporto tra la larghezza e l'altezza della finestra del browser. Questo non ha niente a che vedere con le API o con la possibilità di ruotare o meno lo schermo.

Nel seguente codice:

@media screen and (orientation: landscape ) {
	p {
		color: green;
	}
}

@media screen and (orientation: portrait ) {
	p {
		color: blue;
	}
}

se la larghezza della finestra del browser supera la sua altezza, allora possiamo dire di essere in modalità landscape. In caso contrario, ossia quando l'altezza supera la larghezza, siamo in modalità portrait.

Come si può notare, in questo caso le corrispondenti API JavaScript non c'entrano affatto.