Entwicklung & Design

Device Orientation: Neigung und Position von Mobilgeräten in JavaScript nutzen

Mobile Geräte wie Smartphones und Tablets besitzen in der Regel Lagesensoren, welche die Neigungswinkel nach vorne und hinten beziehungsweise nach rechts und links des Gerätes messen. Außerdem besitzen sie einen Kompass, der die Richtung des Gerätes in Relation zum magnetischen Nordpol misst. Mit JavaScript lassen sich diese drei Werte auslesen und für Awendungen einer Website nutzen.

Drei Winkel zur Messung der Device Orientation

Der Winkel, der die Richtung des Gerätes angibt, ist der α-Winkel. Er hat einen Wert zwischen 0° und 360°, wobei bei 0° das Gerät nach Norden zeigt.

Device Orientation: α-Winkel

Device Orientation: α-Winkel

Der Winkel, der die Neigung nach vorne beziehungsweise nach hinten angibt, ist der β-Winkel. Er hat einen Wert zwischen –180° und 180°. Bei 90° steht das Gerät normal aufrecht, bei –90° steht das Gerät auf dem Kopf. Bei 0° befindet sich das Gerät in der Waage – zumindest was diesen Neigungswinkel betrifft. Bei 180° beziehungsweise –180° liegt das Gerät so, dass das Display nach unten zeigt.

Device Orientation: β-Winkel

Device Orientation: β-Winkel

Der dritte Winkel ist der γ-Winkel. Er gibt die Neigung des Gerätes nach links beziehungsweise rechts an. Er hat einen Wert zwischen –90° und 90°. Bei 90° steht das Gerät auf der rechten Seite, bei –90° steht das Gerät auf der linken Seite.

Device Orientation: γ-Winkel

Device Orientation: γ-Winkel

Mit diesen drei Winkeln lässt sich jede Neigung des Gerätes darstellen.

Device Orientation als JavaScript-Ereignis aufrufen

Um die aktuelle Lage eines Gerätes abzurufen, wird mittels JavaScript das Ereignis „deviceorientation“ aufgerufen, welches immer dann eine anzugebende Funktion ausführt, wenn sich die Lage des Gerätes ändert:

window.addEventListener("deviceorientation",  lagebestimmung, false);

Im Beispiel wird die Funktion „lagebestimmung()“ immer dann aufgerufen, wenn das Gerät bewegt wird und sich so die Lage verändert. Über die Funktion lassen sich nun die drei Winkel auslesen:

function lagebestimmung(ereignis) {
  var winkel_alpha = ereignis.alpha;
  var winkel_beta = ereignis.beta;
  var winkel_gamma = ereignis.gamma;
}

Die Funktion ruft die Werte der drei Winkel ab und übergibt sie jeweils einer Variable. Sie lassen sich nun nutzen.

Anwendungsbeispiel für Device Orientation

Als kleine Spielerei lassen sich beispielsweise Grafiken über Änderung der Neigungswinkel dreidimensional drehen. Dazu werden der β- und der γ-Winkel der CSS-Eigenschaft „transform“ übergeben:

function lagebestimmung(ereignis) {
  var winkel_beta = Math.round(ereignis.beta);
  var winkel_gamma = Math.round(ereignis.gamma);
  document.getElementById("logo").style.webkitTransform = "rotate(" + winkel_gamma + "deg) rotate3d(1, 0, 0, " + winkel_beta + "deg)";
}

Da bisher nur Webkit-Browser wie Chrome und Safari die „rotate3d“ können, funktioniert derzeit nur die Vender-Variante „-webkit-transform“ beziehungsweise „webkitTransform“ in der JavaScript-Schreibweise.

Nutzt ihr bereits die Möglichkeit, die Lage von mobilen Geräten per Device Orientation auszulesen? Welche Anwendungsmöglichkeiten hierfür könnt ihr euch vorstellen?

Weiterführende Links zum Thema mobiles Webdesign:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

7 Kommentare
Felix
Felix

sehr geil, wenn ich das richtig verstanden habe, dann muss es mir möglich seine, meine Website dem Handy hinterherlaufen zu lassen oder? also wenn ich mein Handy im 36° Winkel halte, dann kann ich die Homepage auch im 36° Winkel darstellen.. oder? :)

werd ich Mal ausprobieren ;)

Antworten
Christian Baer

He he, hab’s mal mit Safari/iPhone getestet: http://.dev.epom.de

Antworten
Karriereberater

Immer nehr native Controls werden mit HTML5 möglich. bald sind Native Apps völlig überflüssig. Danke für die News

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung