Mobile viewport configuration

Configure mobile viewports you want to make available while creating your experiences.

  1. Click Administration > Visual Experience Composer.

  2. In the Mobile viewports configuration section, click Add.

    Add viewport

    Or

    To change the configuration of an existing mobile viewport, select that viewport, then click the Edit (pencil) icon.

  3. Type a name for the mobile viewport.

    Give your mobile viewport a descriptive name that is easy to recognize. The name can be up to 36 characters long.

  4. Specify the screen size of the mobile device, both width and height.

    The width can be 150 to 968 pixels. The height can be 150 to 1280 pixels.

  5. (Optional) Select the operating system of the device.

    Options:

    • Android
    • iOS
    • Windows
    • Symbian
    • Blackberry

    If you use the Enhanced Experience Composer and choose an operating system, Target emulates that device when you view the page. For example, if there is a different look and feel for Android than for iOS on your responsive site, Target mimics that behavior.

  6. Click Save.

NOTE
If you attempt to delete a mobile viewport that is in use, the following message displays: “This viewport is currently associated to one or multiple activities. You need to remove the viewport from those activities before being able to delete it.”

Create a responsive experience

Add mobile viewports to your Target activities to create responsive experiences for mobile screens.

  1. Create the desired activity.

  2. In the Visual Experience Composer (VEC), click the Settings gear icon, then select Add Mobile Viewports.

    Add Mobile Viewports option

  3. Click the Devices icon, then enable each device that should have a mobile viewport.

    Enable mobile viewports

    The mobile viewports are listed from smallest to largest according to width.

  4. Edit the mobile viewports as desired.

    Any changes you make to the experience are applied to the experience on all devices. For example, you change the text in a heading.

    Mouse over the name of a viewport to see the viewport’s size.

    iPhone 11 Pro Max responsive experience

  5. If desired, toggle between portrait and landscape modes by clicking the desired orientation icon.

    Orientation options

Training videos

The following videos contain more information about the concepts discussed in this article.

Visual Experience Composer (2 of 2) (7:29) Overview badge

The following demo video includes information about using the Visual Experience composer to work with mobile viewports:

  • Rename and duplicate an experience
  • Create a redirect experience
  • Target an activity to a single URL or a group of URLs
  • Create a multi-page activity
  • Preview and build experience for responsive websites
  • Use overlays to highlight types of elements

Account Preferences in Adobe Target Overview badge

This video includes information about setting up mobile viewports, beginning at 4:40 in the video.

Previous pageElement selectors used in the Visual Experience Composer
Next pageVisual Experience Composer best practices and limitations

Target