JavaScript: monitorare il cambio di orientamento della finestra del browser

In JavaScript possiamo monitorare il cambio di orientamento della finestra del browser 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.

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


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

// Evento che monitora il cambio di orientamento

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