Kategorien
JavaScript & jQuery Responsive Design Webdesign

HTML5: Screen-Orientation-API – Bildschirm drehen mit JavaScript

Über Media Queries kann man das Aussehen einer Website abhängig machen von der Bildschirmorientierung eines Smartphones oder Tablets. Doch gelegentlich kann es vorkommen, dass eine Website nur für eine ganz bestimmte Orientierung vorgesehen ist – Portrait oder Landscape. Bei nativen Apps lässt sich für diesen Fall ein Format vorgeben. Dann wird die App unabhängig von der tatsächlichen Ausrichtung des Gerätes ausschließlich in dem Vorgabemodus dargestellt. Mit der Screen-Orientation-API aus HTML5 gibt es nun auch für JavaScript eine Möglichkeit, die Bildschirmorientierung eines HTML-Dokuments vorzugeben.

screenorientationapiteaser

Bildschirmorientierung für ein Dokument festlegen

Zugriff auf die Bildschirmorientierung hat man über die Eigenschaft „screen.orientation“ und die Methode „lock()“, über welche eine bestimmte Ausrichtung vorgegeben werden kann. Der Standardwert für die Methode ist „any“. Damit wird es dem Gerät erlaubt, jede Orientierung, eben gemäß der physikalische Ausrichtung des Mobilgerätes, anzunehmen. Daneben gibt es den Wert „natural“, der dafür sorgt, dass die Website in der für das Gerät natürlichen Orientierung dargestellt wird. Welche das ist, hängt vom jeweiligen Gerät ab. Bei Smartphones dürfte es in der Regel der Portrait-Modus sein, bei Tablets meist die Landscape-Ausrichtung.

screen.orientation.lock("natural");

Im Beispiel wird die natürliche Orientierung des Gerätes vorgegeben.

Jetzt erlaubt es die Screen-Orientation-API natürlich auch, eine ganz bestimmte Orientierung vorzugeben. Insgesamt stehen vier Werte zur Verfügung, mit denen alle Möglichkeiten der Ausrichtung eines Mobilgerätes abgedeckt sind. So gibt es die Werte „portrait-primary“ und „portrait-secondary“ sowie „landscape-primary“ und „landscape-secondary“.


Alle vier Orientierungen: „portrait-primary“, „portrait-secondary“, „landscape-primary“, „landscape-secondary“

Der Wert „portrait-primary“ ist bei Smartphones in der Regel identisch mit dem Wert „natural“ und entspricht der Standardorientierung. Bei „portrait-secondary“ wird der Portrait-Modus um 180 Grad gedreht. Die Website steht quasi auf dem Kopf, wenn man das Gerät in der normalen Ausrichtung hält.

screen.orientation.lock("portrait-primary");

Bei „landscape-primary“ und „landscape-secondary“ verhält es sich ähnlich. Beide Ausrichtungen unterscheiden sich dadurch, dass bei der „secondary“-Variante die Ausrichtung um 180 Grad gedreht wird.

Man kann auch auf den „primary“- und „secondary“-Zusatz verzichten und nur „portrait“ beziehungsweise „landscape“ als Schlüsselwörter verwenden. Dann wird es dem Gerät erlaubt, jeweils beide Varianten der Orientierung darzustellen.

Um die vorgegebene Orientierung aufzuheben und wieder alle Orientierungen freizugeben, genügt der Aufruf der Methode „unlock()“.

screen.orientation.unlock();

Nur im Vollbildmodus möglich

Das Vorgeben der Orientierung per „screen.orientation“ unterliegt zwei Bedingungen. Zum einen funktioniert das „Einrasten“ per „lock()“ nur, wenn der Browser per „requestFullscreen()“ in den Vollbildmodus geschaltet wurde. Damit zusammen hängt die zweite Bedingung: Da der Vollbildmodus nicht automatisch, sondern nur per Nutzeraufforderung gestartet werden kann, gilt das logischerweise auch für die Screen-Orientation-API.

Daher sollte man den Aufruf beider Methoden mit einem „click“-Event verbinden.

document.getElementById("button").addEventListener("click", function() {
  document.documentElement.requestFullScreen();
  screen.orientation.lock("portrait-primary");

 }, false);

Wichtig ist, dass wie im Beispiel zuerst der Vollbildmodus gestartet wird, bevor die „lock()“-Methode angewendet wird. Wird der Vollbildmodus beendet, wird auch die „eingerastete“ Orientierung wieder freigegeben.

Die vorgegebene Orientierung beendet man zusammen mit dem Vollbildmodus auch dann, wenn ein neues Dokument im Browser geöffnet wird – zum Beispiel per Aufruf eines Links. Die Screen-Orientation-API ist also immer nur für das aktuelle HTML-Dokument gültig.

Orientierung auslesen

Nicht immer will man die Orientierung vordefinieren. Manchmal will man einfach wissen, wie ein Smartphone oder Tablet ausgerichtet ist. Dafür bietet die Screen-Orientation-API die Möglichkeit, die Orientierung einfach auszulesen. Mit der Eigenschaft „type“ wird einer der vier Schlüsselwörter für die Orientierung wiedergegeben.

alert(screen.orientation.type);

Neben „type“ existiert die Eigenschaft „angle“, welche die Orientierung nicht als Schlüsselwort, sondern als Winkel ausgibt.

alert(screen.orientation.angle);

Ein Winkel von 0 Grad entspricht immer der natürlichen Ausrichtung – bei Smartphones also meist „portrait-primary“. 90 Grad stehen für „landscape-primary“, 180 Grad für „portrait-secondary“ und 270 Grad für „landscape-secondary“. Je nach Gerät können die Winkelangaben für andere Schlüsselwörter stehen.

Um die aktuelle Orientierung abzufragen, ist es nicht notwendig, dass der Browser im Vollbildmodus ausgeführt wird.

Per „change“-Event ist zudem möglich, auf eine Änderung der Bildschirmorientierung zu reagieren. Dazu wird der „orientation“-Eigenschaft einfach die Methode „addEventListener()“ sowie eine Funktion hinzugefügt.

screen.orientation.addEventListener("change", function(e) {
  alert(screen.orientation.type + " " + screen.orientation.angle);
}, false);

Im Beispiel wird bei jedem Wechsel der Orientierung ein Alert ausgegeben, der die aktuelle Orientierung als Schlüsselwort sowie als Winkel wiedergibt.

Browsersupport

Die Screen-Orientation-API wird von Chrome ab Version 38 und Opera ab Version 25 ohne Vendorpräfixe unterstützt. Logischerweise funktioniert die API nur auf Mobilgeräten. Um herauszufinden, ob ein Browser die API unterstützt, genügt eine einfache „if“-Abfrage.

if ("orientation" in screen) {
  …
}

So lässt sich für Browser, welche die API nicht unterstützen, gegebenenfalls ein Hinweis einblenden, dass das Gerät manuell in eine bestimmte Orientierung gebracht werden soll. Außerdem wird bei Desktopbrowsern, welche die API nicht unterstützen, keine Fehlermeldung ausgegeben, wenn die API innerhalb dieser Abfrage erfolgt.

Die Screen-Orientation-API ist noch relativ neu. In früheren Entwicklungsphasen der API wurden teils abweichende Bezeichnungen für die Methoden verwendet. So gab es „lockOrientation()“ statt „lock()“ und „unlockOrientation()“ statt „unlock()“. Die alte Schreibweise sollte man für Chrome und Opera nicht mehr verwenden.

Diese alte Schreibweise wird derzeit allerdings noch vom Internet Explorer ab Version 11 und Firefox ab Version 33 unterstützt – allerdings unter Verwendung entsprechender Präfixe – also „ms“ für den Internet Explorer und „moz“ für den Firefox.

screen.msLockOrientation.lock("portrait-primary");
screen.mozLockOrientation.lock("portrait-primary");

Auch das Event zum Feststellen eines Orientierungswechsels unterscheidet sich von der aktuellen Schreibweise der API. Statt „change“ muss hier „orientationchange“ mit entsprechenden Präfixen verwendet werden.

Um alle Browser abzudecken, bleibt einem derzeit nichts anderes übrig, als beide Schreibweisen zu verwenden und bei der alten Schreibweise auf Vendorpräfixe zu achten.

Noch etwas zur grundsätzlichen Verwendung der Screen-Orientation-API: Da sie nur in Kombination mit der Fullscreen-API läuft, sollte sie nicht eingesetzt werden, um damit etwa Webseiten zu gestalten. Vielmehr ist sie geeignet, um beispielsweise in Browserspielen oder anderen Apps, bei denen der Vollbildmodus zwingend nützlich ist, Anwendung zu finden.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.