# Viewport bei Tablet
**URL:** https://forum.shopware.com/t/viewport-bei-tablet/33272
**Category:** Themes & Design
**Created:** [30. Dezember 2015 um 09:47 UTC](https://forum.shopware.com/t/viewport-bei-tablet/33272 "2015-12-30T09:47:38Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Misengo](https://forum.shopware.com/u/Misengo)
#### Post date: [30. Dezember 2015 um 09:47 UTC](https://forum.shopware.com/t/viewport-bei-tablet/33272/1 "2015-12-30T09:47:38Z")
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`
---
### Author:  [@\_chuuuing](https://forum.shopware.com/u/_chuuuing)
#### Post date: [30. Januar 2018 um 10:14 UTC](https://forum.shopware.com/t/viewport-bei-tablet/33272/2 "2018-01-30T10:14:12Z")
Hi Misengo,
ich habe den gleichen Problem getroffen. Haben Sie vielleicht eventuell eine Lösung gefunden?
Mit freundlichen Grüßen
\_chuuuing\_
---
### Author:  [@BestShopPossible](https://forum.shopware.com/u/BestShopPossible)
#### Post date: [30. Januar 2018 um 10:45 UTC](https://forum.shopware.com/t/viewport-bei-tablet/33272/3 "2018-01-30T10:45:54Z")
Und Ihr macht die Änderungen am eigenen Theme auch nach dem Mobile-First Ansatz?
---
### Author:  [@Misengo](https://forum.shopware.com/u/Misengo)
#### Post date: [31. Januar 2018 um 07:19 UTC](https://forum.shopware.com/t/viewport-bei-tablet/33272/4 "2018-01-31T07:19:45Z")
> [@\_chuuuing\_ schrieb:](https://forum.shopware.com/profile/26053/_chuuuing_ "\_chuuuing\_")
>
> 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?
---
### Author:  [@BestShopPossible](https://forum.shopware.com/u/BestShopPossible)
#### Post date: [1. Februar 2018 um 10:27 UTC](https://forum.shopware.com/t/viewport-bei-tablet/33272/5 "2018-02-01T10:27:38Z")
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](https://developers.shopware.com/designers-guide/less/)