> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Viewport Container

# Allgemeine Beschreibung

Der "Viewport Container" ermöglicht es dir, Inhalte gezielt nur auf bestimmten Gerätetypen (Desktop, Tablet oder Mobil) auszuspielen.

Der entscheidende Vorteil gegenüber dem einfachen "Ausblenden" per CSS ist die Performance: Inhalte, die für das aktuelle Gerät nicht bestimmt sind, werden technisch gar nicht erst geladen ("gerendert"). Das spart Datenvolumen und macht deinen Shop schneller, insbesondere auf Smartphones.

# Einsatzmöglichkeiten (Inspiration)

* **Bild-Optimierung:** Lade auf dem Desktop hochauflösende, breite Banner, während Smartphone-Nutzer automatisch ein kleineres, datensparendes Bild im Hochformat erhalten.
* **Usability:** Zeige komplexe Tabellen oder detaillierte technische Daten nur auf großen Bildschirmen an, während mobile Nutzer eine vereinfachte Zusammenfassung sehen.
* **Navigation:** Erstelle unterschiedliche Menü-Strukturen oder Button-Layouts, die perfekt auf die jeweilige Daumengröße und Bedienung abgestimmt sind.

# Featureübersicht:

* **Performance-Boost:** Nicht benötigte Inhalte werden vom Server gar nicht erst an den Browser gesendet.
* **Geräte-Logik:** Klare Trennung zwischen Mobil- und Desktop-Ansichten.
* **Tablet-Flexibilität:** Du entscheidest selbst, ob Tablets eher wie große Smartphones oder wie kleine Desktop-PCs behandelt werden sollen (oder ganz eigene Inhalte bekommen).

***

# Settings:

## Allgemein

<Frame>
  <img src="https://mintcdn.com/dzm/WILLU6jRqIvxGhoU/images/image-123.png?fit=max&auto=format&n=WILLU6jRqIvxGhoU&q=85&s=f891f0c4bdb792779ea3ca4c536c3234" alt="Image" width="1334" height="926" data-path="images/image-123.png" />
</Frame>

***

<Note>
  **Info zur Vorschau:** Bitte beachte, dass die Inhalte für Mobil- und Tablet-Ansichten im Editor (OPC) oft nur sichtbar sind, wenn du die Seite auch tatsächlich mit einem solchen Gerät aufrufst oder die Simulation in den Entwickler-Tools deines Browsers nutzt.
</Note>

**Modus für Tablet:** Tablets sind eine "Zwitter-Größe". Hier legst du fest, welchen Inhalt Tablet-Nutzer sehen sollen. Auswahl zwischen:

<Tip>
  Bitte beachte, dass der Mobile- und Tablet-Content nur in der Vorschau angezeigt werden, wenn du die Seite mit einem entsprechenden Gerät öffnest oder in den Dev Tools deines Browsers ein solches simulierst. Teste die Seite am besten mit dem Smartphone oder Tablet. Die Shopseitige Prüfung ist auch wenig zuverlässig was die Tablet Größe angeht. Wir empfehlen die Nutzung der Kopie von Mobil oder Desktop.
</Tip>

* **Mobile Content übernehmen:** Das Tablet zeigt denselben Inhalt wie das Smartphone. (Sinnvoll bei Touch-optimierten Elementen).
* **Desktop Content übernehmen:** Das Tablet zeigt denselben Inhalt wie der Desktop-PC. (Sinnvoll bei Inhalten, die Platz in der Breite benötigen).
* **Eigener Inhalt:** Erzeugt einen dritten, separaten Container speziell für Tablets, den du individuell befüllen kannst.

***

***