Javascript orientationchange • window.orientation

Wenn ein mobiles Gerät gedreht wird, entsteht ein orientationchange Event für das window-Objekt. window.orientation gibt 0 bzw. 180 zurück, wenn das Gerät im Landscape-Modus ist, -90 bzw. 90 im Porträt-Format.

orientation hat nur einen Wert bei mobilen Geräten. Diese Informationen werden z.B. gebraucht, um ein responsives Webdesign an die Orientierung des Monitors anzupassen. Bei Desktop-Monitoren gibt window.orientation undefined zurück.

Die einfachste Variante, die Ausrichtung abzurufen, ist window.orientation.

window.onorientationchange = function () {
	switch (window.orientation) {  
    case 0:  
        console.log ('0');
        break; 
    case 180:
    	console.log ('180');
        break; 
    case -90:
    	console.log ('-90');
        break;  
    case 90:
    	console.log ('90');
        break;
    }
}

Bei Webseiten interessiert es weniger, ob die Seite auf dem Kopf steht. orientation: portrait bzw. orientation: landscape reichen schon.

if (window.matchMedia("(orientation: portrait)").matches) {
	…
}

if (window.matchMedia("(orientation: landscape)").matches) {
   …
}

Orientation und resize-Event

Auf dem iPad und auf dem iPhone führt ein Drehen des Geräts auch zu einem resize-Event, da sich die Breite und Höhe des Fensters ändern.

orientationchange – Eigenschaften

target

Das Objekt, zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

true, wenn das Ereignis nach oben steigen kann

cancelable

Nein

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist