nicht angemeldet
Webseiten- Komponenten für Mobile Devices
0 
suit
0
Webseiten- Komponenten für Mobile Devices
Gunnar BittersmannHallo,
ich mache gerade eine responsive WebSeite -> also beim Zusammenschieben des Browsers werden die Komponenten untereinander angeordnet.
Ich hab auch einen Sider auf meiner Seite -> diesen Slider möchte ich verschwinden lassen, wenn der Bildschirm kleiner bzw. zu klein ist.
Meine Frage wäre jetzt, wie man das macht. Mit @media { ... display:none}} ist der Slider zwar weg, aber es wird der ganze Code runtergeladen vom Slider.
Kann ich das verhindern oder wie macht man das normalerweise?
Wäre dankbar für Hilfe in diese Richtung.
Vielen Dank und lg
Hannes
-
Kann ich das verhindern oder wie macht man das normalerweise?
Der "Slider" wird vermutlich ohnehin ohne JavaScript nicht funktionieren - darum ist es zielführend, den nur zu laden wenn er auch nötig ist.
Du setzt also per media queries mittels CSS irgendwo einen generierten Inhalt rein der sagt "ich bin jetzt das große layout"
Das analysierst du mit JavaScript und lädst die betreffenden Inhalte per Ajax nach und erzeugst den Slider.
-
Das analysierst du mit JavaScript und lädst die betreffenden Inhalte per Ajax nach und erzeugst den Slider.
Das Problem ist, dass ich mit Contao arbeite und den Slider deshalb nicht richtig selber in der Hand hab -> ich hab mir das ehrlich gesagt leichter vorgestellt.
Gibts vielleicht für Contao da eine einfachere Lösung?Vielen Dank
Hannes-
Gibts vielleicht für Contao da eine einfachere Lösung?
Ich kenne Contao nicht direkt - es erscheint mir aber unwahrscheinlich, dass ein derart verbreitetes CMS von dem überall gut gesprochen wird keine Möglichkeit bietet die Ausgabe so zu beeinfluss wie man das möchte.
-
Gibts vielleicht für Contao da eine einfachere Lösung?
Ich kenne Contao nicht direkt - es erscheint mir aber unwahrscheinlich, dass ein derart verbreitetes CMS von dem überall gut gesprochen wird keine Möglichkeit bietet die Ausgabe so zu beeinfluss wie man das möchte.
Also du meinst, es müsste in Contao direkt eine Möglichkeit geben, dass man sagt, wenn Bildschirm < 767px, dann den Slider nicht an den Client schicken - Hab ich das so richtig verstanden.
Oder meinst Du, Contao bietet die Möglichkeit, das von dir genannte Vorgehen mit AJAX zu implementieren (JavaScript kann man dazugeben zu einer Seite - das gibts auf jeden Fall in Contao - ich war aber der Meinung, dass es in Contao irgendwie einfacher gehen könnte/müsste/sollte)
lg
Hannes-
Also du meinst, es müsste in Contao direkt eine Möglichkeit geben, dass man sagt, wenn Bildschirm < 767px, dann den Slider nicht an den Client schicken - Hab ich das so richtig verstanden.
Nein
Oder meinst Du, Contao bietet die Möglichkeit, das von dir genannte Vorgehen mit AJAX zu implementieren (JavaScript kann man dazugeben zu einer Seite - das gibts auf jeden Fall in Contao - ich war aber der Meinung, dass es in Contao irgendwie einfacher gehen könnte/müsste/sollte)
Ja, das meinte ich.
-
-
-
-
-
Sowas?
http://contao-mobile.de/was-ist-mobile-switch.html
-
@@Kay:
nuqneH
http://contao-mobile.de/was-ist-mobile-switch.html
„Jeder Site-Admin kann anhand selbst definierter Maßstäbe (Header Strings) nach Herzenslust für sich festlegen, wie die unterschiedlichen Site-Versionen zu den einzelnen Geräten zugeordnet werden.“
User agent sniffing, oje.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
oje.
Das nicht nicht das einzige Oje :)
Das heißt, dass 22% aller Internetzugänge in Deutschland „mobiler Art“ sind und im Wesentlichen durch Handys zustande kommen.
Glaub' ich nicht - schon allein der schluss "mobiler Internetzugang" == "Handy" ist haarsträubend.
Die Touch-Pads, die bei den meisten Smartphones eingesetzt werden, [...]
Touch-Pad? Schon klar :)
Die Situation in denen User ihre Handys für den Webszugang nutzen ist oftmals eine gänzlich andere [...] daher „anders aussehen“ und „anders inhaltlich strukturiert“ sein.
Halte ich für ein böses Gerücht - das "anders aussehen" ist einem kleineren Anzeigebereich geschuldt - anders Strukturiert halte ich aber für Unsinn, das verwirrt den Benutzer, macht Bookmarks de facto unmöglich und benötigt mehrfache Wartung auf der Redaktionsseite.
[...] den „App Charakter“ einer Website erfüllen.
Das macht nur in spezialisierten sonderfällen Sinn - z.B. bei Facebook, Twitter oder ähnliches wo der Funktionsumfang auf das wesentliche reduziert wird - bei einer normalen Website wo es um Informationspräsentation geht hingegen aber nicht.
Dies erfolgt über die Zuweisung von unterschiedlichen CSS-Dateien, gefiltert nach dem Media-Type (handheld, all, …).
Das hat noch nie wirklich funktioniert - außer für "print"
Magie: MobileSwitch erkennt die Endgeräte beim „Betreten“ der Website und leitet diese entsprechend um.
http://xkcd.com/1174/ ein relevant xkcd darf nicht fehlen - leider ist nicht nicht ganz scharf aufs Thema gerichtet
-
Hi Gunnar und suit!
Ich stimme euch fast uneingeschränkt zu (und zu dem Text auf der contao Seite muss man wirklich nichts mehr sagen - das habt ihr ja schon gemacht).
User agent sniffing, oje.
Das nicht nicht das einzige Oje :)
Man sollte dabei aber nicht vergessen, dass die Hersteller der Mobile Browser einen quasi dazu zwingen - jedenfalls wenn man dem User die möglichen Optionen offen lassen will.
Der Grund hierfür liegt in der Einführung der sog. DIPs (Device Independent Pixel). Der Artikel auf quirksmode.org beschreibt das "Dilemma" ganz gut.
Aktuell ist es so, dass man einen Meta-Tag (<meta name="viewport" content="width=device-width">) in seinen Quellcode einfügen muss, damit der Viewport diese "Pseudo-Größe" annimmt und die entsprechenden Media Queries greifen.
Ohne diesen Meta-Tag muss der Viewport aber trotzdem nicht der tatsächlichen physikalischen Auflösung des jeweiligen Displays entsprechen - vielmehr beträgt die Viewportbreite dann 980px!
Die imho auch völlig willkürlich gewählt sind (warum z.B. 980px und nicht 960px?).Es ist naheliegend, dass das Aussehen einer Webseite stark unterschiedlich ist, abhängig davon ob der Viewport bspw. 360px, oder 980px breit ist.
Es sollte aber imho nicht Sache des Autors sein, dem User eine Variante vorzuschreiben - vielmehr sollte man ihm die Wahl zwischen beiden lassen, damit sich jeder seine bevorzugte Variante aussuchen kann.
Die entsprechende "Auswahl" erfolgt aber ausschließlich über den UA String. Jeder Mobile Browser hat irgendwo in den Einstellungen eine Option, die sich "Desktop Version" (oder so ähnlich) nennt. Diese bewirkt, dass schlicht das Wörtchen "Mobile" im UA String weggelassen wird (zumindest ist das der hier relevante Unterschied).
Das "Beste" an dem derzeitigen Zustand ist, dass es gar keine Möglichkeit gibt, eine Seite in der nativen (physikalischen) Auflösung des Displays anzeigen zu lassen (wie sinnvoll das ist, sei mal dahingestellt) bei Geräten mit entsprechend großen Auflösungen.
Und auch die geplante Einführung der @viewport rule in CSS schafft keine Abhilfe - sie verlagert das "Problem" nur von HTML nach CSS.
Ich kenne keine andere Möglichkeit, den entsprechenden Meta-Tag einzufügen oder wegzulassen, als UA Sniffing auf der Serverseite zu betreiben.
Aber davon mal abgesehen - ich stehe wirklich auf dem Standpunkt, dass man sich halt mit gewissen Gegebenheiten abfinden muss. Und wer seinen UA String, aus welchen Gründen auch immer "manipuliert", der weiß entweder genau was er tut, oder er ist selbst schuld.
Es gibt imho noch einige weitere Dinge, die sich derzeit nur per UA Sniffing vernünftig lösen lassen, aber die sollen jetzt hier keine Rolle spielen.
Gruß Gunther
-
Die entsprechende "Auswahl" erfolgt aber ausschließlich über den UA String. Jeder Mobile Browser hat irgendwo in den Einstellungen eine Option, die sich "Desktop Version" (oder so ähnlich) nennt. Diese bewirkt, dass schlicht das Wörtchen "Mobile" im UA String weggelassen wird (zumindest ist das der hier relevante Unterschied).
Wenn die Browser den Medientyp "Handheld" ordentlich unterstützen, könnte man das damit lösen - aber hier wurde seitens der Browserhersteller zu wenig Hirn investiert und von vor allem von Apple völlig unsinniger Schrott ergänzt.
Eben die Viewport-Einstellung, die ins CSS gehört (wie das Opera macht) und nicht ins HTML-Dokument.
-
Hi!
Wenn die Browser den Medientyp "Handheld" ordentlich unterstützen, könnte man das damit lösen - aber hier wurde seitens der Browserhersteller zu wenig Hirn investiert und von vor allem von Apple völlig unsinniger Schrott ergänzt.
Ja, einer fängt an und alle anderen ziehen nach ...!
Das Konzept der Medientypen kann man wohl in großen Teilen als gescheitert ansehen.
Ich stimme dir zu, dass dies "die Gelegenheit" gewesen wäre, (doch) noch den Handheld Medientyp zu nutzen.Aber mit Projection verhält es sich auch nicht besser. AFAIK ist Opera (mit Presto) der einzige Browser, der im Vollbildmodus diesen Medientyp unterstützt/ verwendet.
Eben die Viewport-Einstellung, die ins CSS gehört (wie das Opera macht) und nicht ins HTML-Dokument.
Da ist sie zumindest besser/ richtiger Aufgehoben, als im HTML. Aber wie unterscheidest du da zwischen den beiden Varianten? Gar nicht. Insofern ist das eigentliche "Problem" damit imho nicht gelöst.
Gruß Gunther
-
-
-
-
-