Grato por sua visita. Neste momento esta página está apenas disponível em inglês.

Alexa Viewport Profiles Package

The Alexa viewport profiles package provides a collection of named resource values that skill developers can use in conditional logic within their 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.

"import":[
    {
        "name": "alexa-viewport-profiles",
        "version" : "1.0.0"
    }
]

Profiles

The viewport profile resources represent composites of a range of device viewport characteristics that fall into defined class groupings. They can be used in conditional logic to pivot resource, style, and layout evaluations for high-level viewport classifications.

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

Shape

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'

Orientation

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
  • viewportClassMediumSmall
  • viewportClassMediumMedium
  • viewportClassMediumLarge
  • viewportClassLargeSmall
  • viewportClassLargeMedium
  • viewportClassLargeLarge
  • viewportClassXLargeLarge
  • viewportClassXLargeXLarge
Resource width height
viewportClassSmallSmall viewportSizeSmall viewportSizeSmall
viewportClassSmallMedium viewportSizeSmall viewportSizeMedium
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

Density

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