Druckbare Version
Hallo zusammen,
leider habe ich hier im Forum noch nicht die Antwort gefunden, die mich in dieser Angelegenheit weiterbringt. Vielleicht könnt ihr mir helfen:
Ich möchte gerne, dass meine Seite automatisch in die mobile Ansicht wechselt, sobald das Endgerät, beziehungsweise der Browser eine gewisse Breite unterschreitet. Gibt es hierfür eine simple Umsetzung?
Danke
Ja, das nennt sich responsive Webdesign. "Simpel" ist das aber nicht immer.
Ich verstehe die Frage etwas anders. Nämlich so, dass das der Seite zugeordnete "mobile Seitenlayout" automatisch verwendet werden soll, wenn die vorgegebene Breite unterschritten wird. Normalerweise wird das ja anhand des Useragent-Strings entschieden und nicht über die Viewportbreite. Wie man das so umbiegen kann wie gewünscht, weiss ich aber nicht.
Dazu müsste man per JS die Viewsize abfragen und ggf. dann ein Redirect auslösen welche die Mobile Ansicht erzwingt, wie damals der Umschalter in der alten Demo.
Beim reinen Request bekommste ja keine Auflösung mitgesendet.
Aber ob das schick ist, ich weiß nicht....
wie tab es formuliert habe ich es gemeint. Mir ist die Erkennung einfach zu ungenau und daher möchte ich es gerne anhand der Breite entscheiden, was ausgegeben wird. Mir geht es insbesondere um Slider und Menüs, die je nach Auflösung nicht mehr ganz so schön aussehen. Mir scheint das der leichteste Weg kontrollieren zu können, was angezeigt wird.
Gibt es denn noch eine alternative Möglichkeit zu der Javasript-Abfrage und dem Redirect? Wie würde ich diesen Weg am sinnvollsten implementieren?
Naja, die gängige Alternative wäre, die unterschiedlichen Layouts komplett per CSS aus dem gemeinsamen HTML zu realisieren. Das geht dann mit Hilfe von Media-Queries, die den Browser instruieren, Teile des CSS abhängig von der Viewportbreite - oder auch anderen Eigenschaften - für die Darstellung zu berücksichtigen oder eben auch nicht. Damit lassen sich dann Eigenschaften passend überschreiben.
Also am sinnvollsten ist, aus meiner Sicht, definitiv ein Layout, dass voll responsive ist.
Sollen es zwei Layouts bleiben wüßte ich spontan auch keinen besseren Weg als die Breite auszulesen und daraufhin parallel das Layout zu setzen.
Als sinnvoll erachte ich diesen Weg jedoch nicht.
Ein Komplettumbau der Layoutstruktur kommt aus Zeitgründen leider nicht in Frage. Man kann natürlich den Sinn hinterfragen - in meinem Fall würde es aber ausschließlich Geräte treffen, die tendentiell mobil verwendet werden und wo beispielsweise ein angepasstes Menü eher von Vorteil ist. Mir geht es nämlich total auf den Zeiger - und das wird hier ja auch an der ein oder anderen Ecke diskutiert - dass es Tablets gibt, die sich als Desktop-Gerät melden, in Wirklichkeit aber ein viel zu kleines Display haben, um alle Inhalte so anzuzeigen, wie sie wiedergegeben werden sollen. Insofern macht das für dieses spezielle Projekt durchaus Sinn.
Ich werde mich mal darin versuchen, diese Java-Abfrage zu implementieren. Wenn ihr hierzu noch Tipps habt, an welcher Stelle ich das am besten einbaue, wäre ich sehr dankbar. Welche Nachteile seht ihr konkret? Abgesehen der Tatsache, dass JS deaktivert sein könnte.
Viele Wege führen zum Ziel. Du könntest:Zitat:
Zitat von erleben-media
- Ein JavaScript Template erstellen, worin du die Abfrage auf die Breite machst und dann die Seite mit einem zusätzlichen GET Parameter neu lädst (zB ?mobile=true).
- In einer eigenen Extension in einem getPageLayout Hook überprüfen, ob dieser GET Parameter oder eine gewisse Session Variable gesetzt ist.
- Wenn ja: ein alternatives Layout zurückgeben und die Session Variable setzen.
- Wenn nein: das JavaScript Template zum aktuellen Layout hinzufügen.