Preview Screen Sizes

Visitors to your site can use any number of devices such as smart phones, tablets, laptop computers, or desktop computers. The Site Management Tools Preview Screen Sizes feature lets you quickly simulate and preview how your site is displayed on different devices and screen sizes. This enables you to see the site as your customers see it on their various devices.

Click Preview Screen Sizes on the toolbar to enter screen size preview mode. Preview Screen Sizes is available only when editing or previewing the site.

The following screenshot illustrates preview mode for a medium phone.

1 – Information

Point to the information icon to see the details of the currently selected display option. Displayed information includes display orientation, width, and height. This is not available for the fit preview option.

2 – Preview Size

The Preview Size dropdown list lets you choose the preview dimensions for the currently selected device type.

3 – Fit

Fit automatically sizes the preview to the dimensions of the current browser window.

4 – Desktop

The desktop button lets you preview the site on common desktop display sizes.

5 – Tablet

The tablet button lets you preview the site on common tablet screen dimensions.

6 – Phone

The phone button lets you preview the site on common smart phone screen dimensions.

7 – Screen Orientation

The orientation option is available for tablet and phone preview. Clicking the button toggles between landscape and portrait orientations.

8 – Exit

Click exit to close device preview mode.

Device preview options include fit to current window, desktop, tablet, and phone. Each device preview option provides you with common dimensions for the type of device. For example, you can preview how thesite would look on a small smart phone with screen dimensions of 320 x 480 pixels or on a larger smart phone with screen dimensions of 414 x 736.

Standard preview devices and display sizes include:

Fit: preview the site based on the current browser window size.
Desktop
- Small: 1366 x 768
- Medium: 1280 x 1024
- Large: 1920 x 1080
Tablet
- Small: 768 x 1024
- Medium: 800 x 1280
- Large: 1024 x 1366
Phone
- Small: 320 x 480
- Medium: 375 x 667
- Large: 540 x 960

If you want to preview the site for a device size that is not defined, you can create custom preview sizes by adding the dimensions to the adapter file. See Site Management Tools Custom Preview Screen Sizes.

Portrait and Landscape Preview Modes

When you preview the site for tablet or phone, you also have the option to change the orientation. The rotate button on the preview toolbar lets you toggle the display between portrait and landscape orientations.

The rotate option is not available for the desktop preview. If you need to preview the desktop in portrait mode, you can define a portrait oriented desktop option in the adapter file. The following sample code illustrates this type of custom display option:

          desktop: [{
         name: 'Portrait',
         width: 768,
         height: 1024
}]

Site Navigation in Preview Mode

Site navigation is fully functional while previewing screen sizes. However, if you attempt to follow a link that it is not on your domain, you are redirected to your site, and a message displays that navigating away from the site is not supported while editing the site.

Portrait and Landscape Preview Modes

Site Navigation in Preview Mode

Related Topics