JavaScript: monitorare l'orientamento dei dispositivi mobile con il metodo .matchMedia()

In JavaScript possiamo monitorare il cambio di orientamento nei dispositivi mobile con semplicità.

Il metodo .matchMedia() effettua una query del tutto analoga alla sua controparte CSS. È bene ricordare che portrait e landscape nei CSS indicano unicamente il rapporto tra larghezza ed altezza della viewport.

var query = window.matchMedia('(orientation: portrait)');


if(query.matches) {  
	// Portrait 
} else {  
	// Landscape
}

// Evento che monitora il cambio di orientamento

query.addListener(function(q) {
	if(q.matches) {
		// Portrait
	} else {
		// Landscape
	}
});