Alexa Viewport Profiles Package

The Alexa viewport profiles package provides a collection of named resource values that you can use in conditional logic within your APL document to vary any number of presentation choices for different viewport characteristic groupings.

Import the Alexa viewport profiles package in to your document

To use the Alexa viewport profiles package, and all of its values, add it to your document's package import array. The version must always be specified in the import, and is currently 1.0.0. See APL Document properties.

        "name": "alexa-viewport-profiles",
        "version" : "1.0.0"


The viewport profile resources represent composites of a range of device viewport characteristics that fall into defined class groupings. Each profile represents a shape, orientation, size, and density. Use the viewport profiles in conditional logic to pivot resource, style, and layout evaluations for high-level viewport classifications.

"when": "${@viewportProfile == @hubRoundSmall}"
Resource Options
viewportProfile One of:
  • hubRoundSmall
  • hubLandscapeSmall
  • hubLandscapeMedium
  • hubLandscapeLarge
  • tvLandscapeXLarge
Resource Shape
Size Class
hubRoundSmall viewportShapeRound viewportOrientationEqual viewportClassSmallSmall viewportDensityLow
hubLandscapeSmall viewportShapeRectangle viewportOrientationLandscape viewportClassMediumXSmall viewportDensityLow
hubLandscapeMedium viewportShapeRectangle viewportOrientationLandscape viewportClassMediumSmall viewportDensityLow
hubLandscapeLarge viewportShapeRectangle viewportOrientationLandscape viewportClassLargeSmall viewportDensityLow
tvLandscapeXLarge viewportShapeRectangle viewportOrientationLandscape viewportClassXLargeLarge >=viewportDensityHigh


The shape resource definitions can be used to distinguish viewport shape characteristics.

"when": "${@viewportShape == @viewportShapeRectangle}"
Resource Options
viewportShape One of:
  • viewportShapeSquare
  • viewportShapeRectangle
  • viewportShapeRound
Resource Condition
viewportShapeSquare viewport.width == viewport.height
viewportShapeRectangle viewport.width != viewport.height
viewportShapeRound viewport.shape == 'round'


The viewport orientation resource values can be used to distinguish viewport orientation.

"when": "${@viewportOrientation == @viewportOrientationLandscape}" 
Resource Options
viewportOrientation One of:
  • viewportOrientationEqual
  • viewportOrientationLandscape
  • viewportOrientationPortrait
Resource Condition
viewportOrientationEqual viewport.width == viewport.height
viewportOrientationLandscape viewport.width > viewport.height
viewportOrientationPortrait viewport.width < viewport.height

Size Classes

Viewport size grouping resources for viewport width and height in dp

Sample conditional clause:

"when": "${@viewport.width == @viewportSizeMedium}"
Resource Condition (viewport.width/viewport.height) dp
viewportSizeXSmall < 600
viewportSizeSmall ≥ 600 && <960
viewportSizeMedium ≥ 960 && <1280
viewportSizeLarge ≥ 1280 && <1920
viewportSizeXLarge ≥ 1920

Viewport size class grouping resources for combined viewport width and height

Sample conditional clause:

"when": "${@viewportSizeClass == @viewportClassMediumLarge}"
Resource Options
viewportSizeClass One of:
  • viewportClassSmallSmall
  • viewportClassSmallMedium
  • viewportClassMediumXSmall
  • viewportClassMediumSmall
  • viewportClassMediumMedium
  • viewportClassMediumLarge
  • viewportClassLargeSmall
  • viewportClassLargeMedium
  • viewportClassLargeLarge
  • viewportClassXLargeLarge
  • viewportClassXLargeXLarge
Resource width height
viewportClassSmallSmall viewportSizeSmall viewportSizeSmall
viewportClassSmallMedium viewportSizeSmall viewportSizeMedium
viewportClassMediumXSmall viewportSizeMedium viewportSizeXSmall
viewportClassMediumSmall viewportSizeMedium viewportSizeSmall
viewportClassMediumMedium viewportSizeMedium viewportSizeMedium
viewportClassMediumLarge viewportSizeMedium viewportSizeLarge
viewportClassLargeSmall viewportSizeLarge viewportSizeSmall
viewportClassLargeMedium viewportSizeLarge viewportSizeMedium
viewportClassLargeLarge viewportSizeLarge viewportSizeLarge
viewportClassLargeXLarge viewportSizeLarge viewportSizeXLarge
viewportClassXLargeLarge viewportSizeXLarge viewportSizeLarge
viewportClassXLargeXLarge viewportSizeXLarge viewportSizeXLarge


Viewport density (DPI) grouping resources

Sample conditional clause:

"when": "${@viewportDensity == @viewportDensityHigh}"
Resource Options
viewportDensity One of:
  • viewportDensityXLow
  • viewportDensityLow
  • viewportDensityNormal
  • viewportDensityHigh
  • viewportDensityXHigh
  • viewportDensityXXHigh
Resource Condition (viewport.dpi)
viewportDensityXLow < 140
viewportDensityLow ≥ 140 && < 200
viewportDensityNormal ≥ 200 && < 280
viewportDensityHigh ≥ 280 && < 400
viewportDensityXHigh ≥ 400 && < 560
viewportDensityXXHigh ≥ 500 && < 720