3.11.2007

Apple iPhone – Spezielles Kipp-Event (landscape, profile) fangen

Wie viele Beispiele befinden sich im Web, die die ganze Zeit im timeout-Funktionen die Devicebreite auf 320 oder 480 Pixel prüfen, um ein Kippen des Geräts zu erkennen und dann gegebenenfalls die Ansicht auf "profile" oder "landscape" anzupassen. Dabei feuern das iPhone und der iPod touch, oder besser gesagt der Safari 3, ein Event, welches die Rotation abfangen läßt.  Beim Drehen wird zum body-Element das Event namens orientationchange gefeuert. Um nun die gewünschten Änderungen am Layout vorzunehmen, schreibt man sich eine Javascript-Funktion, die dies handle't und leitet das Event darauf:

<body onorientationchange="changeOrientation()">
  1. window.addEventListener("orientationchange", function()
  2. {
  3.   var intOrientation = window.orientation;
  4.   var strOrientation = Math.abs(intOrientation) == 90
  5.           ? "landscape" : "profile";    
  6.  
  7.   document.body.setAttribute("orient", strOrientation);
  8.   window.scrollTo(0, 1);
  9. }, false);

Darüber hinaus läßt sich natürlich auch die aktuelle Ausrichtung aus der Eigenschaft window.orientation auslesen, die folgende Zustände einnehmen kann:

window.orientation Orientation / Rotation
0 Portrait / Hochkant
90 Landscape / Horizontal, gegen den Uhrzeigersinn
-90 Landscape / Horizontal, im Uhrzeigersinn gedreht
180 Portrait / Hochkant, überkopf (Button oben)

Für alle, die immernoch nicht genug haben, hier die andere Variante

Ich habe eine Annomalie mit dem iPod touch gestestet, in dem diese Variante nicht immer funktioniert und der Safari schlicht weg seine Breitenänderungen nicht mehr mitteilt. Deswegen mag ich diese Variante nicht...

  1. var updateLayout = function()
  2. {
  3.   if (window.innerWidth != currentWidth)
  4.   {
  5.     currentWidth = window.innerWidth;
  6.     var orient = (currentWidth == 320) ? "profile" : "landscape";
  7.     document.body.setAttribute("orient", orient);
  8.     window.scrollTo(0, 1);
  9.   }
  10. };          
  11.  
  12. iPhone.DomLoad(updateLayout);
  13. setInterval(updateLayout, 500);

Geschrieben von: Flo

Kategorien:

Hinterlasse einen Kommentar






Dein Kommentar:

Kategorien