nicht angemeldet
verschiedene alternative Layouts für Menüs je nach Fensterbreite
0 0 Media Queries
0
verschiedene alternative Layouts für Menüs je nach Fensterbreite
Hallo,
ich möchte gerne je nach Breite des Fensters ein anderes Layout des Menüs an der gleichen Position zeigen. Ich habe unter meinem Template den Ordner mod_menu erstellt, beide alternativen Layouts programmiert und in den Ordner gestellt(sie sind auch jeweils funktionstüchtig, werden als mögliches Layout angezeigt, ich kann sie auswählen und alles ist gut). Nun möchte ich aber, wenn das Fenster breit ist, das eine Layout sehen, und wenn das Fenster zu schmal ist, das andere Layout. Allein über CSS ist das nicht zu lösen, da die Layouts recht unterschiedlich aufgebaut sind.
Gibt es eine Möglichkeit, das alternative Layout zu ändern je nach Fensterbreite???
-
Allein über CSS ist das nicht zu lösen, da die Layouts recht unterschiedlich aufgebaut sind.
Halte ich für unwahrscheinlich.
Gibt es eine Möglichkeit, das alternative Layout zu ändern je nach Fensterbreite???
Stichworte: "Responsive Design" und "Media Queries" - da findest du in den weiten des Internets und auch hier im Forum tonnenweise informationen :)
Vorweg: es wird nicht allein mit CSS möglich sein, da die Erkennung der Orientierung und die Veränderung der Größe des virutellen Viewports von diversen Touch- und Mobilgeräten mit CSS allein nicht möglich ist.
Die Formatierung selbst bleibt davon aber unberührt, das sollte mit CSS problemlos zu lösen sein.
-
Hi!
Vorweg: es wird nicht allein mit CSS möglich sein, da die Erkennung der Orientierung und die Veränderung der Größe des virutellen Viewports von diversen Touch- und Mobilgeräten mit CSS allein nicht möglich ist.
Beispiel(e)?
Gruß Gunther
-
Vorweg: es wird nicht allein mit CSS möglich sein, da die Erkennung der Orientierung und die Veränderung der Größe des virutellen Viewports von diversen Touch- und Mobilgeräten mit CSS allein nicht möglich ist.
Beispiel(e)?
http://forum.de.selfhtml.org/archiv/2012/7/t210578/#m1435820
Zusammengefasst: du ermittelst mit den Media Queries was es zu ermitteln gibt und schreibst dies als pseudo-Element mit einem Schlüsselwort ins Dokument.
Diesen Wert liest du mit JavaScript und manipulierst dann den virtuellen Viewport auf deine Wunschvorstellung.
Diese beiden Teile müssen so früh wie möglich ausgeführt werden, damit der Viewport nicht "spring"
Die weitere Formatierung erfolgt dann im CSS.
-
Hi!
Vorweg: es wird nicht allein mit CSS möglich sein, da die Erkennung der Orientierung und die Veränderung der Größe des virutellen Viewports von diversen Touch- und Mobilgeräten mit CSS allein nicht möglich ist.
Beispiel(e)?
http://forum.de.selfhtml.org/archiv/2012/7/t210578/#m1435820
Zusammengefasst: du ermittelst mit den Media Queries was es zu ermitteln gibt und schreibst dies als pseudo-Element mit einem Schlüsselwort ins Dokument.
Diesen Wert liest du mit JavaScript und manipulierst dann den virtuellen Viewport auf deine Wunschvorstellung.
Das sehe ich anders. Ich halte es gar für kontraproduktiv MQs zu verwenden und diese dann von JS abhängig zu machen.
So ganz habe ich die "Problematik", die du da anscheinend siehst, aber auch (noch) nicht verstanden, bzw. sehe diese nicht.
Alles was es braucht, sind doch MQs mit 'min|max-width: ...em' und ggf. noch die 'Orientation'.
Gruß Gunther
-
Alles was es braucht, sind doch MQs mit 'min|max-width: ...em' und ggf. noch die 'Orientation'.
Schon mal in der Praxis damit gearbeitet?
-
Alles was es braucht, sind doch MQs mit 'min|max-width: ...em' und ggf. noch die 'Orientation'.
Schon mal in der Praxis damit gearbeitet?
Ja, u.a. aktuell ...! ;-)
Zumal der Meta-Tag ja sowieso schon wieder "vom Aussterben bedroht" ist, zugunsten von @viewport.
Gruß Gunther
-
Alles was es braucht, sind doch MQs mit 'min|max-width: ...em' und ggf. noch die 'Orientation'.
Schon mal in der Praxis damit gearbeitet?
Ja, u.a. aktuell ...! ;-)
Zumal der Meta-Tag ja sowieso schon wieder "vom Aussterben bedroht" ist, zugunsten von @viewport.
Lies meinen ursprünglichen Beitrag nochmal - da steht darum, warum das in einer idealen Welt funktioniert aber nicht in der Praxis, weil eben der drecks iOS-Safari @viewport nicht kennt - das ist der einzige Grund warum man diesen mit JavaScript manipulieren muss, wenn die 980 nicht genehm sind.
-
»» Lies meinen ursprünglichen Beitrag nochmal - da steht darum, warum das in einer idealen Welt funktioniert aber nicht in der Praxis, weil eben der drecks iOS-Safari @viewport nicht kennt - das ist der einzige Grund warum man diesen mit JavaScript manipulieren muss, wenn die 980 nicht genehm sind.
Ich mache das serverseitig per UA-Sniffing (ja ja, ich weiß ..., aber die Browserhersteller nötigen einen ja im Moment dazu) um den Meta-Tag entsprechend zu setzen, oder nicht (für alle, nicht nur iOS).
Aber was hat das eigentlich mit den unterschiedlichen Layouts per MQs zu tun?
Außer dass halt in Abhängigkeit der "eingestellten/ gewählten" Viewportgröße ggf. die eine oder andere MQ matched.Gruß Gunther
-
»» Lies meinen ursprünglichen Beitrag nochmal - da steht darum, warum das in einer idealen Welt funktioniert aber nicht in der Praxis, weil eben der drecks iOS-Safari @viewport nicht kennt - das ist der einzige Grund warum man diesen mit JavaScript manipulieren muss, wenn die 980 nicht genehm sind.
Ich mache das serverseitig per UA-Sniffing (ja ja, ich weiß ..., aber die Browserhersteller nötigen einen ja im Moment dazu) um den Meta-Tag entsprechend zu setzen, oder nicht (für alle, nicht nur iOS).
Aber was hat das eigentlich mit den unterschiedlichen Layouts per MQs zu tun?
Außer dass halt in Abhängigkeit der "eingestellten/ gewählten" Viewportgröße ggf. die eine oder andere MQ matched.Der Grund ist, dass der man die Orientierung von iOS-Geräten in Kombination mit der Höhe und Breite ermitteln muss, weil Höhe und Breite beim Orientierungswechsel nicht getauscht werden und man damit einen falschen Wert bekäme und dann das Layout nicht wechselt sondern einfach skaliert wird und man ggf absichtlich rauszoomen muss, anstatt direkt weiterarbeiten zu können. Das ist ärgerlich :)
-
Aber was hat das eigentlich mit den unterschiedlichen Layouts per MQs zu tun?
Außer dass halt in Abhängigkeit der "eingestellten/ gewählten" Viewportgröße ggf. die eine oder andere MQ matched.Der Grund ist, dass der man die Orientierung von iOS-Geräten in Kombination mit der Höhe und Breite ermitteln muss, weil Höhe und Breite beim Orientierungswechsel nicht getauscht werden und man damit einen falschen Wert bekäme und dann das Layout nicht wechselt sondern einfach skaliert wird und man ggf absichtlich rauszoomen muss, anstatt direkt weiterarbeiten zu können. Das ist ärgerlich :)
Dann musst du doch nur die 'orientation' mit einbeziehen in deine MQs und schon ist das kein Problem mehr.
Das erklärt für mich aber immer noch nicht, warum du da irgendetwas mit Javascript rumstricken willst!? Geht doch alles mit purem CSS.
Gruß Gunther
-
Das erklärt für mich aber immer noch nicht, warum du da irgendetwas mit Javascript rumstricken willst!? Geht doch alles mit purem CSS.
Du kannst den Viewport auf einem iOS-Gerät _nicht_ mit CSS verändern.
Du sagst selbst, dass du das per UA-Sniffing machst - ich mache das per JavaScript :) technisch gesehen braucht man JavaScript also nicht weil es noch eine andere Lösung gibt, aber allein mit CSS gehts eben leider nicht.UA-Sniffing war aber noch nie eine gute Idee, von daher nehme ich davon Abstand, weil für viele Responsive-Layouts ohnehin JavaScript-Unterstützung gefordert ist - z.B wenn es ums nachladen von zusätzlichen Inhalten per Ajax geht, die auf einem winzigen Display aber der Overkill wären und dort lieber nur auf Anforderung anders daherkommen müssen. Sowas kann man dann gleich in derselben Logik ausführen.
-
Das erklärt für mich aber immer noch nicht, warum du da irgendetwas mit Javascript rumstricken willst!? Geht doch alles mit purem CSS.
Du kannst den Viewport auf einem iOS-Gerät _nicht_ mit CSS verändern.
Ich halte mal fest: Wir reden hier von der Viewport Größeneinstellung, die momentan noch rein über den Meta-Tag erfolgt, richtig? Denn das gilt ja für alle Geräte, die eine entsprechende "Umschaltung" des Viewports unterstützen.
Du sagst selbst, dass du das per UA-Sniffing machst - ich mache das per JavaScript :) technisch gesehen braucht man JavaScript also nicht weil es noch eine andere Lösung gibt, aber allein mit CSS gehts eben leider nicht.
Richtig - die Umschaltung lässt sich so nicht bewerkstelligen.
Was aber ja ansich nichts mit den MQs als solches zu tun hat.UA-Sniffing war aber noch nie eine gute Idee, von daher nehme ich davon Abstand, weil für viele Responsive-Layouts ohnehin JavaScript-Unterstützung gefordert ist ... . Sowas kann man dann gleich in derselben Logik ausführen.
Dem wage ich zu widersprechen ...! ;-)
Ob gute Idee oder nicht, die Browserhersteller haben es nunmal so gemacht. Die Umschaltung zwischen "Mobile- und Desktop-Viewport" erfolgt einzig und allein über den UA.Und da es einer meiner Grundsätze ist, den User möglichst nicht "zu bevormunden", sehe ich da keine andere Möglichkeit, als UA-Sniffing. Und wenn dann doch lieber gleich serverseitig, wo man sich sicher sein kann, dass die erforderliche "Technik" auch tatsächlich verfügbar ist.
Auch den Rest sehe ich eher kritisch. Ich finde es äußerst kontraproduktiv ein responsives Layout mit CSS zu erstellen, und es dann doch am Ende von Javascriptunterstützung abhängig zu machen. Dank Flexbox funktioniert das in neueren Browsern auch ziemlich gut ohne JS.
Zur zusätzlichen Unterstützung und Steigerung der Usability gerne, aber nicht für das eigentliche Layout.Was machst du denn eigentlich im Bezug auf den Meta-Tag genau per JS?
Lässt du dem User die Wahl zwischen den beiden Varianten?
Hast du eine eigene Umschaltmöglichkeit auf der Seite?Gruß Gunther
-
-
-
-
-
-
-
-
-
-
-
-
Hallo!
ich möchte gerne je nach Breite des Fensters ein anderes Layout des Menüs an der gleichen Position zeigen. ...
Nun möchte ich aber, wenn das Fenster breit ist, das eine Layout sehen, und wenn das Fenster zu schmal ist, das andere Layout. Allein über CSS ist das nicht zu lösen, da die Layouts recht unterschiedlich aufgebaut sind.Doch, denn genau dafür gibt es Media Queries!
Gibt es eine Möglichkeit, das alternative Layout zu ändern je nach Fensterbreite???
Ja, Media Queries. ;-)
Gruß Gunther
-
Ganz vergessen: Ich benutze Joomla 3.1 und das Beez-Template
-
Ganz vergessen: Ich benutze Joomla 3.1 und das Beez-Template
Das tut de facto nichts zur Sache.
-