Configure Device Preview

Overview

This page describes how to configure the viewport widths available in the Experience manager's device preview. You can customize which device widths are available and set the default device preview for each channel.

Default Device Preview Behavior

The Experience manager allows CMS users to preview channel pages at different viewport widths. This helps users see how their website appears on various devices, including tablets and smartphones. By default, the Experience manager provides the following viewport options:

• Any device (responsive, unbound; the page reflows when resizing the window or opening side panels)
• Desktop (1280px)
• Tablet (720px)
• Smartphone (320px)

You can configure these viewport widths per channel using the Console.

Configure Viewport Widths per Channel

You can override the default viewport widths for "desktop", "tablet", and "phone" on a per-channel basis. Starting with version 14.3.0, you can also add custom viewport widths and specify icons.

Viewport widths are configured using the multi-valued hst:devices property on a channel's hst:channel node.

Configure Viewport Widths Using JSON Blobs

Info: Available in version 14.3.0 and newer.

From version 14.3.0, the hst:devices property accepts JSON blobs with the following keys:

Key	Description	Example
id	String identifier for the viewport width.	"tablet"
width	Viewport width in pixels.	1024
icon	Icon reference from: Material Design Icons webfont (<v16.5), or Material Design Icons (>v16.5). Optional when overriding a default viewport width.	"mdi-watch" (<v16.5), "watch" (>16.5)

The following example updates the available viewport widths for the "myproject" preview channel:

• Overrides the default "tablet" viewport width to 1024 pixels.
• Adds a custom "watch" viewport width at 224 pixels with the "watch" icon.

/hst:myproject/hst:configurations/myproject-preview/hst:workspace/hst:channel:
  hst:devices: ['{ "id": "tablet", "width": 1024 }', '{ "id": "watch", "width": 224,
      "icon": "watch" }']
copy

Configure Viewport Widths Using ID-Width Pairs

In all 14.x versions, you can configure the hst:devices property using ID-width pairs. The width must be specified in pixels and postfixed with "px". This method only supports overriding the default "desktop", "tablet", and "phone" viewport widths. You cannot set icons or add custom devices using this approach.

To set the "tablet" viewport width for the "myproject" channel to 768px, use the following property value:

/hst:myproject/hst:configurations/myproject-preview/hst:workspace/hst:channel:
  hst:devices: [ ..., tablet:768px ]
copy

The path /hst:myproject/hst:configurations/myproject-preview is created after you open the channel preview for the first time.

To make this configuration persistent, add it to your repository data module using a YAML definition.

Configure the Default Viewport per Channel

Info: Available in version 14.3.0 and newer.

By default, the Experience manager selects the responsive "Any device" viewport when opening a channel. You can change the default viewport for a channel by adding the hst:defaultdevice property to the channel's hst:channel node and specifying one of the available devices. The default options are:

• desktop
• tablet
• phone

Example configuration:

/hst:myproject/hst:configurations/myproject-preview/hst:workspace/hst:channel:
  hst:defaultdevice: tablet
copy