JavaScript: individuare l'orientamento dello schermo dei dispositivi mobile

JavaScript interagisce molto bene con i dispositivi mobile. Un browser come Safari, completamente standard, consente a noi sviluppatori di scrivere finalmente del codice privo di quei workaround che usiamo di solito per venire incontro al mancato supporto delle specifiche del DOM W3C. In questo articolo vedremo come intercettare il cambio di orientamento dei dispositivi mobile con JavaScript.

L'evento orientationchange

Questo evento fa parte delle API per mobile. Se applicato all'oggetto globale window, ci permette di leggere i cambiamenti nel valore della proprietà orientation di tale oggetto, che può essere di:

1. 0: il dispositivo è in modalità di visione portrait
2. 90: il dispositivo è in modalità di visione landscape (ruotato a sinistra)
3. -90: il dispositivo è in modalità di visione landscape (ruotato a destra)

Esempio:

window.addEventListener('orientationchange', function() {
  console.log(window.orientation);
}, false);

L'evento resize

I browser che non implementano l'evento orientationchange implementano comunque l'evento resize che si innesca quando la finestra del browser modifica le sue dimensioni.

Esempio:

window.addEventListener('resize', function() {
  
}, false);

In questo caso possiamo calcolare le dimensioni dello schermo utilizzando le seguenti proprietà:

1. outerWidth, outerHeight: pixel reali
2. innerWidth, innerHeight: pixel virtuali

Con qualche calcolo risulta relativamente semplice individuare l'orientamento del dispositivo partendo dalle dimensioni dello schermo.