Guten Morgen, ich habe eine Frage zum Viewport. Dieser schaut im Standard so aus: /* structure */ @phoneLandscapeViewportWidth: 30em; // 480px @tabletViewportWidth: 48em; // 768px @tabletLandscapeViewportWidth: 64em; // 1024px @desktopViewportWidth: 78.75em; // 1260px Im Landscape (Ipad) funktioniert ohne Probleme, aber sobald man in den Portrait geht, nimmt er bei einigen Elementen den mobile Viewport. Dies scheint allerdings nur bei hinzugefügten Elementen zu sein, welche aber in allen Viewport vorhanden sind. Muss man diese noch woanders initialisieren? @phoneLandscapeViewportWidthraus : 47.9375em; //exit tablet Hat das Problem „gelöst“, aber ist wohl nicht Sinn und Zweck da immer Exits zu haben. Abgeschaut habe ich das in der jquery.shopware-responsive.js Im Master Template, also Responsive Demo Shop funktioniert es. Nur im vererbten Template nicht: Folgende Fehlermeldung in der Console. Uncaught TypeError: element[pluginName] is not a functionwindow.StateManager.$.extend.\_initSinglePlugin @ 1451402751\_6e29a8bcf52f0dcc7b398566621abab0.js:323window.StateManager.$.extend.\_initPlugin @ 1451402751\_6e29a8bcf52f0dcc7b398566621abab0.js:321window.StateManager.$.extend.addPlugin @ 1451402751\_6e29a8bcf52f0dcc7b398566621abab0.js:311(anonymous function) @ 1451402751\_6e29a8bcf52f0dcc7b398566621abab0.js:1320j @ 1451402751\_6e29a8bcf52f0dcc7b398566621abab0.js:2k.fireWith @ 1451402751\_6e29a8bcf52f0dcc7b398566621abab0.js:2n.extend.ready @ 1451402751\_6e29a8bcf52f0dcc7b398566621abab0.js:2I @ 1451402751\_6e29a8bcf52f0dcc7b398566621abab0.js:2
Hi Misengo,
ich habe den gleichen Problem getroffen. Haben Sie vielleicht eventuell eine Lösung gefunden?
Mit freundlichen Grüßen
_chuuuing_
Und Ihr macht die Änderungen am eigenen Theme auch nach dem Mobile-First Ansatz?
Hi Misengo,
ich habe den gleichen Problem getroffen. Haben Sie vielleicht eventuell eine Lösung gefunden?
Mit freundlichen Grüßen
_chuuuing_
Wir haben immer die Exits benutzt, updaten aber gerade auf 5.3 - das muss jetzt erst noch untersucht werden. Welche Version setzt du ein?
@BestShopPossible - was meinst du?
Naja mobile first. Google ist “nur einen Klick entfernt”. Zuerst die CSS-Anweisungen für mobile, dann die für mobile landscape, dann tablet protrait, dann tablet landscape und am Ende für den Desktop kaskadierend angeben. Cascading Style Sheets mobile first - man sollte doch wissen was man macht, wenn man etwas macht, oder nicht?
/* dieser Inhalt gilt für mobile und alle nachfolgenden Viewports */
.element {
background-color: @brand-primary;
width: 100%;
.unitize(height, 40);
/* dieser Inhalt gilt AB(!!!) tablet portrait und alle nachfolgenden */
@media screen and(min-width: @tabletViewportWidth) {
background-color: @brand-secondary;
}
}
Die Reihenfolge ist mobile first. Wenn man AB(!!!) tablet landscape etwas ändern möchte, muss die Anweisung NACH(!!!) der mobile Anweisung kommen (kaskadierend, mobile first).
Siehe auch: Getting started with LESS