CSS, HTML und Javascript mit {stil}

Javascript orientationchange • window.orientation

orientation change: Handy oder Tablett drehen

Javascript orientationchange löst aus, wenn der Benutzer das mobile Gerät dreht und sich die Orientierung ändert.

orientationchange • Javascript WINDOW Event

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.

window.orientation – Ausrichtung von mobilen Geräten: Porträt oder Landscape

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.

orientation 0innerWidth
innerHeight

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
orientation 0 90 -90 180