Hallo Leute, wir haben ein mega dickes Problem und ich hoffe Ihr könnt uns dabei helfen dieses Problem zu lösen. Wir möchten gerne, dass es zwei Ansichten unsere Homepage gibt. Einmal eine mobile Variante, mit mobilem Menü, welches bis zu einer Breite von 1200 px dargestellt wird und eine Desktop-Variante, welche dann ab 1200px-Breite dargestellt wird. Ich habe diese Lösung schon bei anderen Seiten gesehen und finde sie praktisch, weil dann stets die gleiche mobile Variante angezeigt wird, vom Smartphone bis zum Tablet-Landscape. Ich dachte auch, dass es eigentlich ganz einfach zu realisieren wäre. Ich habe dafür in der Datei /templates/Honeygrid/styles/config/_bootstrap_variables.scss die $screen-sm verändert: Code: $screen-lg: 1200px !default; $screen-sm: 1199px !default; $container-large-desktop: ($screen-lg - 30) !default; $grid-float-breakpoint: $screen-sm !default; Also den Breakpoint meiner Meinung nach von 768 Pixel auf 1200 Pixel verschoben. Nun haben wir einen miserablen IST-Zustand: Von 0 bis 768 Pixel wird eine mobile Variante unserer Homepage optimal dargestellt. Von 768 Pixel bis 1000 Pixel wird eine mobile Variante dargestellt, jedoch ist das Menü leer und ohne Kategorien. Von 1000 Pixel bis 1200 Pixel wird eine vollkommen zerschossene mobile Variente dargestellt. Ab 1200 Pixel wird die Desktop-Version optimal dargestellt. Vielen Dank für Eure Hilfe www.euro-lock.de
Das hatten wir mit EyeCandy und MobileCandy, Schau Dir das auf einem 10" Tablet an, da läuft man ganz schnell weg Deshalb gab es da einen Buttion, um von MC auf EC umzuschalten. Wenn Du das umsetzt, machst Du einen riesen Rückschritt.
Das funktioniert leider nicht so einfach. Viele JavaScripte sind davon abhängig in welcher Ansicht man sich gerade befindet, zum Beispiel die Generierung des mobilen Menüs, wie du selber schon festgestellt hast. Das alleine mit ein paar Anpassungen von SCSS-Variablen erreichen wird nicht klappen, du müsstest dich dann auch durchs gesamte JavaScript wühlen und dann nach auflösungsabhängigen Dingen suchen. Wie Barbara aber auch schon treffend festgestellt hat, wäre der Umbau auch ein massiver technischer Rückschritt. Die unterschiedlichen Ansichten gibt es ja, damit das auf den Unterschiedlichen Endgeräten gut aussieht. Der Ansatz, dass auch Tablets eine rein mobile Ansicht angezeigt bekommen ist mittlerweile veraltet und bringt dir nichts, weil sich ein Kunde mit einem Tablet auf deiner Seite nicht zurechtfindet und da ein mobiles Template echt nicht so wahnsinnig gut aussieht. MobileCandy ist da ein gutes Beispiel.
Und wie programmier ich das nun alles wieder um ? Ich verstehe es nicht. Bevor ich an dem Breakpoint was veränderte, schaltete er über 768 Pixel Breite in den Desktop-Modus. Dort war aber dann alles verschoben. Also wenn ich jetzt das wieder rückgängig mache, haben die Tabletnutzer wieder eine verschobene Desktop-Darstellung. Oder muss ich für jedes Gerät einen extra Breakpoint anlegen ? Das wollte ich ja mit der einheitlichen Variante umgehen. Unsere Kunden bestehen nur zu 5% aus Tabletnutzern, dennoch wollte ich für diese 5% eine korrekte Gestaltung der Seite ermöglichen.
Du musst das richtig einstellen, dann ist auch nichts verschoben. Es gibt dafür im Style Editor die Gridspalten für die verschiedenen Bildschirmauflösungen. Vielleicht hilft Dir das hier: (Link nur für registrierte Nutzer sichtbar.)