Landscape Mod bei Handys

[Wellenbrecher1963]

Hallo Leute,

ich suche eine Möglichkeit, den Landscape Modus der Handys abzufragen, wenn der Nutzer sein Handy um 90° dreht. Ich will eine mobile Webseite bauen, die einige Fotos enthält. Je nach dem, wie der Nutzer sein Handy dreht, sollen sich die Fotos verkleinern oder vergrößern. Die Fotos sollen dabei über die ganze Bildschirmbreite gehen.

Mit folgender Funktion kann man den Landscape Mod abfragen:

window.orientation

Ist das ja auch bis hierhin noch kein Problem.

Das Problem sitzt tiefer. Wenn der Nutzer sein Handy dreht, wird die Seite nicht neu geladen, sondern das Handy passt irgend wie das Layout auf die Breite selbst an. Jedoch mit oben genannter Funktion kann man den aktuellen Zustand rausbekommen, wenn man diese aufruft.

Es werden 3 Zustände als Werte zurückgegeben:  Werte 0 für Portrait, 90 für Landscape rechts, oder -90 für Landscape links. Jedoch nur wenn man die Funktion z.B. per Button oder per onLoad aufruft.

Gibt es in JavaScript eine Möglichkeit, einen Listener zu erstellen? Oder eine Art Schleife, die den Modus Sekündlich z.B. abruft?

Dann könnte ich durch die Abfrage den aktuellen Zustand des Bildschirms / Handy erfahren.

Alles was mit HTML4/5, CSS2/3 und AJAX machbar wäre, wäre mir als Tip und Code Schnipsel willkommen.

Ich hatte dann schon mal folgenden gemacht - den Bildern keine feste Breite und höhe zu gewiesen. Einfach nur:

<img src="Pfad/Bild.png" class="img">

verwendet. Per CSS hae ich dann folgendes gemacht:

  
.img {  
  min-width: 100%;  
  border: 0;  
}  

Die Bilder haben eine Breite von 320px.

Mit dieser Aktion sollte das Layout bei PORTRAIT auf etwa 220 - 240 px zusammen geschoben werden und bei LANDSCAPE auf 320px aufgezogen werden. Leider klappt das nicht immer im LANDSCAPE Mode. Die Bilder sind meist um 30px breiter als das Display. Die Folge ist, dass man das Layout hin und her schieben kann. Und das ist doof. Im Portrait Mode klappt alles. Nur der Landscape Mod macht gelegentlich Zicken. Manchmal geht es auch perfekt.

Wenn ich den Mode erkennen könnte, kann ich per JS die Browserbreite abfragen und danch die Bilder auf die Breite umformatieren / skallieren.

Hat einer von Euch das schon mal lösen können, oder vielleicht eine Idee, wie man das Problem lösen könnte???
Vielen Dank für eure Hilfe.
Euer Sylvio

[JürgenB]

Hallo Wellenbrecher1963,

schon mal onresize (http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm) ausprobiert?

Gruß, Jürgen

[Wellenbrecher1963]

Hallo Wellenbrecher1963,

schon mal onresize (http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm) ausprobiert?

Gruß, Jürgen

Jep, damit könnte es klappen. Jedenfalls werden die Veränderungen von Höhe und Breite in Echtzeit auf dem Display ausgegeben, wie man das in der beigefügten Demo dort sehen kann.

Bin begeistert. Danke für den Tip und den Link.
Der Sylvio.

[Tobias Hahner]

Hallihallo!

Mit folgender Funktion kann man den Landscape Mod abfragen:

window.orientation

Gibt es in JavaScript eine Möglichkeit, einen Listener zu erstellen? Oder eine Art Schleife, die den Modus Sekündlich z.B. abruft?

Für javascript gibt es da den schon eingebauten listener

  
window.onorientationchange  

Beste Grüsse,
    Tobias Hahner

[JürgenB]

Hallo Tobias,

Für javascript gibt es da den schon eingebauten listener

window.onorientationchange

  
wird das außerhalb der Apple-Welt auch unterstützt? Es soll ja auch schon Smartphones geben, deren Gehäuse nicht von einem Apfel verziert wird.  
  
In einem Beitrag schrieb jemand, dass dieser Eventhandler unzuverlässig sei:  
  
<http://groups.google.de/group/iphonewebdev/browse_thread/thread/d844a6367f7b293f>  
  
Gruß, Jürgen  

[EKKi]

Mahlzeit Wellenbrecher1963,

Jedoch nur wenn man die Funktion z.B. per Button oder per onLoad aufruft.

Nein. *Immer dann*, wenn die Funktion ausgeführt wird, die window.orientation abfragt, erfährst Du den aktuellen Wert. Das Ausführen muss dabei nicht zwangsläufig mit einem Event-Handler erfolgen.

Wenn Du diese Funktion einfach in einem bestimmten http://de.selfhtml.org/javascript/objekte/window.htm#set_interval@title=Intervall immer wieder ausführen lässt, hast Du doch ungefähr das, was Du wolltest, oder nicht?

MfG,
EKKi