Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Topper · 22.02.2013

Hallo,
ich bin dabei eine einfache Bildergalerie zu schreiben, die speziell auf mobile Geräte wie Smartphones oder Tablets ausgerichtet ist. Dabei werden die Bilder einfach neben- bzw. untereinander angezeigt und man kann durch Wischen die Bilder durchlaufen.
Bisher ist es so, dass ich mittels Javascript erkennen lasse, ob das Gerät hoch oder quer gehalten wird (screen.height größer oder kleiner als screen.width). Je nachdem wird dann die Galerie so geladen, dass die Bilder entweder nebeneinander angeordnet werden (Gerät wird quer gehalten) oder untereinander (Gerät wird hochkant gehalten). Das funzt bis herhin bestens.

Als Tüpfelchen hätte ich nun gern ein Funktion, die bei schon geladener Seite erkennt, ob das Gerät auf hoch bzw. quer gedreht wird und darauf hin die Seite selbstständig aktualisiert.

Hier also die konkrete Frage: Läßt sich in einer bereits geladenen Webseite prüfen, ob sich die Bildschirmauflösung geändert hat?

Big THX, Topper

Robbyn- · 22.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Vielleicht hilft dir das weiter:

Myhar · 22.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Ja, mittels mediaqueries. Bzw. mit einem JS, welches auf zB window.onresize reagiert.

Topper · 22.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Supi, vielen Dank

Das habe ich im Netz gefunden und es funzt wie gewünscht:

Code:

<body onResize="window.location=window.location;">

Gruß, Topper

Curanai · 24.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Hallo Topper,

als "User" Deiner Seite kenne ich diese Reaktion einer Seite beim Drehen meines Gerätes gar nicht. Demnach führst Du eine Pseudo-Reaktion Deiner Seite ein, die beim User eher ein "oh, wo hab ich jetzt aus Versehen gedrückt?!"hervorruft. Misstrauen gegenüber "ich werde gerade autom. weitergeleitet" ist da schon beinahe vorprogrammiert ... häufig springen User direkt ab.

Der Trick ist aber deutlich simpler: Im Zuge der Fortentwicklung des Webs gibt es nun schöne Dinge in HTML5, mit denen Dir genau diese Arbeit "abgenommen" wird. Rudimentär sieht das bspw. so aus:

Code:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;" />

Der "Viewport" ist hierbei das, was der User "Screen" nennt - also sichtbarer Bereich. Das "Tag" <meta> gehört in den <head> Deiner Seite usw.

Eine von mir als Beispiel. Dort kannst Du selbst sehen, wie simpel der Aufbau ist und wie effektiv dies auf einem Mobilgerät (egal welcher Hersteller) abläuft.

Und ebenfalls nicht zu verachten: Es gibt kein "onRezise" - genauso wenig wie "onClick", "onLoad" o. ä. Korrekt und konform heißt es "onresize" bzw. "onclick" usw.

Dann noch: Aufgrund des "Scopings" in Browsern, also in welcher Programmebene JavaScript ausgeführt wird und wie der Browser hier agiert (Achtung, das ist ein häufig unterschätzter Flaschenhals!!), gefällt mir Dein "onresize" nicht - ich würde Dir daher eher hierzu raten:

Code:

onresize="location.reload()"

Schönen Sonntag noch.

Topper · 25.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Na jaa...ganz so ist es aber nicht - die Seite, die alle kennen, hat sich ja nicht verändert. Ich programmiere ja im Prinzip eine neue Seite, damit die Mobilgeräte-Nutzer einen komfortableren und besser zu betrachtenden Zugang zur Seite bekommen. Diese Seite ist abgespeckt und zeigt nur das notwendigste, was man beim Zugriff "von unterwegs" braucht. Die Bildergalerie ist nicht das Wichtigste, aber wichtig ist sie schon (weil jede Woche eine neue Galerie).
Was ist denn falsch daran, bei der Anzeige der Bilder eine Abhängigkeit einzubauen, ob das Gerät hoch oder quer gehalten wird? Ich hab ja vorher versucht, nur "eine" Galerie zu basteln, aber das ist Mist, weil je nach Betrachtung (Hoch / Quer) die jeweils anders-formatigen Bilder nicht auf den Bildschirm passen.
Es hat sich inzwoischen aber auch in anderer Hinsicht herausgestellt, dass das automatische Neuladen der Seite beim Ändern der Auflösung nicht die praktikablelste Lösung ist: Es gibt nämlich mobile Geräte/Browser, die auch ohne Drehen des Bildschirms eine Änderung der Auflösung melden - z.B. der Dolphin-Browser des Samsung-Betriebssystems Bada. Der meldet jede Änderung des Bildausschnitts (Zoomen mit 2 Fingern, oder auch nur das automatische Ausblenden der Adresszeile, wenn die Seite geladen ist). Das bewirkt dann ein ständiges Neuladen...

Ich muß mich also ohnehin nach ner anderen Lösung umschauen...

Myhar · 25.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Topper schrieb:
Ich programmiere ja im Prinzip eine neue Seite, damit die Mobilgeräte-Nutzer einen komfortableren und besser zu betrachtenden Zugang zur Seite bekommen. Diese Seite ist abgespeckt und zeigt nur das notwendigste, was man beim Zugriff "von unterwegs" braucht.

Das ist eine falsche Annahme. Handy heißt heutzutage nicht mehr, dass die Seite von unterwegs angesehen wird. Die Nutzung der Handys zum surfen auf der Couch steigt immer mehr und die Leute haben hier auch die Zeit, dass sie alle Informationen auf der Website sehen wollen, die Leute ohne Handy auch zu sehen bekommen.

Topper schrieb:
Es hat sich inzwoischen aber auch in anderer Hinsicht herausgestellt, dass das automatische Neuladen der Seite beim Ändern der Auflösung nicht die praktikablelste Lösung ist

Ein automatisches Neuladen per JS kann keine gute Lösung sein. Wie von mir in der ersten Antwort beschrieben, solltest du dich mit mediaqueries auseinandersetzen. Damit kannst du dynamisch auf das drehen von Tablets/Handys/etc. reagieren, ohne dass die Seite neu geladen wird. Zusätzlich dazu kannst du nicht nur das CSS, sondern auch das JS an die neu skalierte Seite anpassen.

Topper · 26.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Hey, das mit dem "Viewport" ist ne Supersache - Danke sehr

Was das Neuladen der Seite per JS angeht - da geht es mir eigentlich einzig und allein darum, dass je nach Bildschirmausrichtung die Bilder nebeneinander bzw. untereinander angeordnet werden. Das ist alles, weitere Anpassungen werden bei diesem Neuladen nicht gemacht.
Sinngemäß frage ich beim Laden der Seite ab, ob screen.height < screen.width (das wäre QUER) -> dann wird eine Tabelle mit 1 Zeile vielen Spalten (je nach Bildanzahl) erzeugt und das Durchschauen der Bilder erfolgt somit durch seitwärts wischen. Anderenfalls (Gerät hochkant) wird eine Tabelle mit 1 Spalte und vielen Zeilen erzeugt und das Durchschauen erfolgt durch Rauf-Runter-Wischen. Das an sich klappt recht gut, finde ich...

Myhar · 26.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Und wieso verwendest du dafür keine mediaqueries? Die Höhe ist zu vernachlässigen, da deine Bilder sowieso definierte Dimensionen haben und sich durch die Breite die Höhe automatisch ergibt. Dann kannst du doch folgendes machen:

HTML:

@media only screen and (max-width = 1024px) {
.galerie img{display:inline}/*Bilder nebeneinander*/
}
@media only screen and (max-width = 980){
.galerie img{display:block}/*Bilder untereinander*/
}

Möchtest du noch ein scrollen in eine bestimmte Richtung, dann gib dem Galeriecontainer noch ein overflow:scroll in die -x oder -y Richtung.
Ich hoffe ja, dass du keine HTML Tabelle für deine Galerie verwendest, sondern nur den Ausdruck mangels eines besseren verwendest?

patrick_l · 26.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

HTML:

<!-- orientation » landscape and portrait -->
<link rel="stylesheet" media="only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait)" href="assets/css/tablet.css" >

oder wie Myhar schon schrieb, über @media im CSS notieren.

Liebe Grüße, Patrick

Curanai · 26.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Warum keine Mediaqueries - ich antworte jetzt einfach mal, obwohl es mich ja nicht betrifft:

[ 1. ] Es gibt genügend Geräte, die diese Order ignorieren (!). Hauptsächlich sind dies die per Standard installierten Browser der Gerätehersteller. Die wollen wie die "Großen" mitspielen (nicht erst einmal erlebt; den anderen Fall - das es geht - aber auch; mein Lieblingsbeispiel sind immer "Anfahrtkarten" oder generelle Grafiken, wenn ich nur einen Text der Seite ausdrucken muss/will).

[ 2. ] Wie Du, Myhar, schon selbst sagtest: Wenn ich auf der Couch sitze und mein WLan nutze, will ich keine vordefinierte Einschränkung erfahren - ich will 100 %. Die Verwendung des Mediaqueries lässt dies aber gar nicht zu und der Mobilverwender kann die eigentliche Seite, Formatierung (whatever) nie zu Gesicht bekommen.

Warum "screen"-Messungen nicht so toll sind: Weil nicht jeder eine Standard-Installation eines Browsers hat und der eine oder andere gern irgendwelche Toolbars vertikal am Browserrand hat ... probier mal, was Du für "lustige Zahlen" erhältst und wie falsch dann Dein Layout schnell werden kann (da das falsche CSS genommen wird).

Tabelle? Hoffentlich ist es das wirklich nicht ... verwende lieber eine reine CSS-Lösung auf "float"-Basis - macht Deinen Source wartbarer, schneller beim Betrachter etc.

Myhar · 26.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Curanai schrieb:
[ 1. ] Es gibt genügend Geräte, die diese Order ignorieren (!).

The first media query is NO media query. Es gibt also keinen Browser ohne media Query

Browser, welche keine spezifischen Media Querys verstehen, werden mit der basisversion ohne Mediaqueries bedient. So wie es bei Seiten ohne Mediaqueries der Fall ist.

Curanai schrieb:
Hauptsächlich sind dies die per Standard installierten Browser der Gerätehersteller. Die wollen wie die "Großen" mitspielen (nicht erst einmal erlebt; den anderen Fall - das es geht - aber auch; mein Lieblingsbeispiel sind immer "Anfahrtkarten" oder generelle Grafiken, wenn ich nur einen Text der Seite ausdrucken muss/will).

Wie willst du auf einem Handy etwas ausdrucken? Mich würde auch interessieren, welcher Standardbrowser keine Mediaqueries kann? Das kann jeder Browser (siehe oben)

Curanai schrieb:
[ 2. ] - ich will 100 %. Die Verwendung des Mediaqueries lässt dies aber gar nicht zu

Dann hast du das Prinzip der Mediaqueries nicht verstanden. Sicher, man kann Elemente mittels display:none nicht anzeigen, aber das ist nicht der Sinn von Mediaqueries. Mittels Mediaqueries soll jedem Besucher, egal ob Handy oder Tablet oder Desktop oder wasauchimmer die selbe Information geboten werden. Es wird lediglich die Darstellung an den verfügbaren Platz angepasst.

Curanai schrieb:
probier mal, was Du für "lustige Zahlen" erhältst und wie falsch dann Dein Layout schnell werden kann (da das falsche CSS genommen wird).

Auch hier drängt sich mir der Verdacht auf, dass du Mediaqueries nicht verstanden hast. Mediaqueries sind nicht dafür gedacht, eine fixe Pixelbreite zu unterstützen sondern einen Bereich von x bis y. Da kann es mir egal sein, was der User für Toolbars installiert hat oder ob der Browser im Vollbild läuft oder nicht. Es gibt zB ein Layout für 980px bis 1200px, alle Auflösungen dazwischen (also auch "lustige Zahlen" wie 1123px) bekommen das selbe, fluide Layout. Anderes Beispiel: Hat der User zB einen Desktop mit HD Auflösung, den Browser aber nur auf 672px (wieder eine "lustige Zahl") offen, dann bekommt er eben das Layout für 600px bis 980px angezeigt. Die Informationen sind im Idealfall die selben.

Curanai · 26.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Sorry, aber Du hast da was aus dem Context gerissen: Die "lustigen Zahlen" gehen um die JavaScript-Größenmessung. Hatte das doch extra unterteilt ...

Ich kann Dich abschließend aber beruhigen - Dein Verdacht ist unangebracht und das (mediaquery) wird hier stellenweise auch verwendet. Aber eben nicht für die autom. Erkennung der Haltung eines Gerätes (schon gar nicht bei Wechseln). Ich bin nur der festen Überzeugung, dass er keine Mediaqueries benötigen würde ... (die Seite ist nur für Mobilgeräte - er muss also keine Alternative anbieten, wenn "mediaqueries" erfüllt wären!!).

Myhar · 27.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Curanai schrieb:
Sorry, aber Du hast da was aus dem Context gerissen: Die "lustigen Zahlen" gehen um die JavaScript-Größenmessung.

Nein, da habe ich nichts aus dem Kontext gerissen sondern eher etwas falsch verstanden. Wieso brauchst du bei mediaqueries Javascript? Bzw. wozu überhaupt eine JS Größenmessung? Das ist mir nicht klar.

Curanai schrieb:
Ich bin nur der festen Überzeugung, dass er keine Mediaqueries benötigen würde ... (die Seite ist nur für Mobilgeräte - er muss also keine Alternative anbieten, wenn "mediaqueries" erfüllt wären!!).

Diese Überzeugung ist auch dein gutes Recht.

Aber er hat doch nirgends geschrieben, dass die Seite nur für Mobilgeräte ist?
Er hat nur von "Bildergalerie ,die auf mobile Geräte ausgerichtet ist" geschrieben. Und zwischen einer Galerie und einer kompletten Seite ist für mich ein Unterschied.
Auch gibt es den Fall, dass keine mediaqueries unterstütz werden, nicht. Deshalb kann ich deine Abneigung dagegen leider nicht nachvollziehen.

Topper · 27.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Doch doch, die Bildergalerie ist nur für mobile Geräte gedacht. Die "Haupt-Homepage" ist wesentlich aufwändiger - die darin enthaltene Bildergalerie enthält die letzten 4 Wochenenden (jedes WE neue Bilder) und ist mit Thumbnails usw. ausgestattet.
Die mobile Version soll wesentlich einfacher aufgebaut sein: Keine Thumbnails, nur das letzte WE und halt alle Bilder neben- bzw. untereinander zum "Durch-Wischen".

Daran arbeite ich halt z.Zt. und ich gucke jetzt mal was es mit den Mediaqueries auf sich hat. Was auch noch ein Problem werden könnte, ist die Ladezeit. Bei einer Bilderzahl zwischen 100 und 200 Bildern werde ich DA wohl auch noch mal drüber nachdenken müssen. Evtl. reicht es ja schon, die JPGs stärker zu komprimieren, aber das ist auch nicht grad das Gelbe vom Ei...
Es wird sicher noch viel zu tun sein...aber ich danke euch sehr für eure Hilfe

Curanai · 27.02.2013

AW: Webseite auf Tablet: Erkennen, ob Gerät gedreht wird

Myhar, gar kein Problem - ich zeig's Dir, warum ich auf JavaScript gekommen bin (ähnlich "speziell für Mobilgeräte") und daher dies angesprochen habe:

Topper schrieb:
Bisher ist es so, dass ich mittels Javascript erkennen lasse, ob das Gerät hoch oder quer gehalten wird (screen.height größer oder kleiner als screen.width).

Und aufgrund eigener Beobachtungen sind diese Werte nur bedingt zuverlässig - ich sprach in meinem ersten Posting davon.

"mediaqueries" sind toll - um unterschiedlichen Bildschirmabmessungen verschiedene Formatierungen zu geben (s. bspw. Posting von Patrick). Dann wird aus font-size 12pt schnell ein 10pt, wenn bspw. die Bildschirmauflösung wie besagt kleiner ist. Drehe ich das Gerät hingegen aber, benötige ich eine andere Wirkung - und da ist (der Meinung bin ich weiterhin) "viewport" der richtige(re) Ansatz.

Das Problem mit den Bildern und wie Du das in den Griff bekommst: Große Bildportale wie bspw. Fotolia bieten den Usern an, selbst entscheiden zu können, wie viele Bilder (oder wenige) sie je Seite sehen wollen. Demnach bietest Du eine Start-Konfiguration von bspw. 4 x 3 Bildern an. Via Auswahlbox kann der User dann von sich aus auf andere Anzahlen von Reihen umstellen: 8 x 3, 12 x 4, alle ... vielleicht auch 2 x 3 anbieten.

Die Thumbs selbst benötigen nicht zwangsläufig ein JPG mit 80er Qualität. Schau mal, ob vielleicht ein png-8 nicht kleiner ausfallen würde. Ansonsten ist JPG mit 75 oder 70 als Thumb (je nach Größe) auch noch akzeptabel.

Kleiner Tipp noch von mir: Wenn Du mit "großen" (KB) Thumbs arbeitest, lass den Browser erst die Seite rendern und hole dann die Bilder ab! Das ist für Dich im Erstellen zwar etwas aufwendiger, aber der User sieht, dass die Bilder derart lange zum Laden benötigen: "Ladegrafik" () vorausgesetzt, denn damit "täuscht" Du Usern schnelleres Laden vor ().

Verzichte auf mehrere externe JavaScript-Dateien (= weitere Requests an den Server und keine parallele Abholung durch den Browser; macht er nur bei CSS; vgl. "Zeitlinie" unter "Netzwerk" in Firebug) und diese alle schön vor das schließende </body>-Tag. Wenn Du nicht auf mehrere Dateien verzichten willst, da aber Performance benötigst, unterhalten wir uns eindringlicher darüber (kleiner Eingriff ins DOM und Absetzen eines Kommandos, was aber multiple .js-Dateien lädt).

Ansonsten noch gzip für JavaScript und CSS einrichten (das Tutorial wartet auf Abnahme), evtl. minify* über Deine JavaScripte und schon rennt das Ding ...

Du siehst: Eine Mischung aus "Eigenleistung" und "Selbstbestimmung des Users" macht Deine Gallerie dann für jedermann flexibel.

* unbedingt Originaldateien behalten!!