Wenn Sie im Reiter Inhalt einer Seite sind, können Sie über den Toolbarbutton Viewport die Anzeige des Inhalts reduzieren, um die Ansicht auf unterschiedlichen Anzeigen zu simulieren. Diese Einstellungen lassen sich bei Bedarf in der conf.json innerhalb der panel Eigenschaft weiter einstellen.

Standard Viewports ändern

Standardmäßig stehen Ihnen folgende Viewports zur Verfügung:

• Desktop (Vollansicht)
• Laptop (1024x768)
• Tablet (800x600)
• Smartphone (360x640)

Außer der Desktopansicht können Sie über default_viewports die anderen überschreiben oder sogar deaktivieren. Das verwendete Icon ist hier allerdings nicht einstellbar. Dazu ändern Sie eine oder mehrere der folgenden Eigenschaften:

• label: Beschriftung.
• value: Ausmaße in Pixel, z.B. 1024x768.
• hidden: Ansicht nicht anzeigen (Wert true).

Diese jeweils für laptop, tablet oder smartphone. Beispiel:

{
    "panel": {
        "default_viewports": {
            "laptop": {
                "hidden": true
            },
            "tablet": {
                "label": "Tablet groß"
            },
            "smartphone": {
                "value": "300x300"
            }
        }
    }
}

Eigene Viewports einstellen

Bei Bedarf können Sie auch eigene Viewports über viewports einstellen. Hier setzen Sie eine Liste von zusätzlichen Viewports, welche jeweils die Eigenschaften label und value erwarten. Standardmäßig wird das Smartphone Icon gesetzt, welches Sie über icon aber auch selbst einstellen können (mögliche Werte: desktop, laptop, tablet, smartphone). Beispiel:

{
    "panel": {
        "viewports": [{
            "label": "Unser Monitor",
            "value": "720x500",
            "icon": "tablet"
        }]
    }
}