Mobile viewports for responsive experiences

Mobile viewports let you preview your Adobe Target activities on screens of various sizes.

The mobile viewport preview feature is designed for responsive sites that render well on various devices, windows, and screen sizes. Responsive sites automatically adjust and adapt to any screen size, including desktops, laptops, tablets, or mobile phones.

A viewport is defined by the size of the rectangle filled by a web page on your screen. The viewport is the size of the browser window, minus the scroll bars and toolbars. Browsers use “CSS pixels.” For many devices, such as those with retina screens, the viewport is smaller than the advertised device resolution.

Below are the viewports and resolutions for popular devices. Remember to use the viewport size in Target.

To deliver an activity to visitors on a particular device, choose the appropriate audience for that device in the activity diagram. Use the Mobile Web Composer to edit the page in the activity for that device. To run an activity across your entire digital experience to ensure it looks good across all devices, don’t apply targeting. Instead, use mobile viewports to preview the activity on each screen size.

For responsive sites, typically your site is designed to open in a different view when accessed by a device with a specific screen size. Those screen sizes that trigger the new views are known as CSS breakpoints. CSS breakpoints are points where website content responds depending on device width to display the optimal layout to visitors. CSS breakpoints are also called media queries.

Save your CSS breakpoints in Target so you can preview your experiences for each view you define. Each of these experiences displays in a mobile viewport in the Target interface. Open the view for each screen size by clicking that viewport along the top of the display.

If your site is not responsive, use the Mobile Web Composer to view a site if your activity is targeted to a specific device.