{@viewport} At Viewport Rule

{@viewport} At Viewport Rule

@viewport at-rule consists of the @-keyword followed by a block of descriptors describing the viewport. These descriptors are per document and there is no inheritance involved (declarations using the inherit keyword will be dropped). @viewport descriptors work very similar to @page descriptors and follow css' cascade order, they override descriptors from preceding rules. The example below sets the viewport to fit the width of the device:


@viewport{width:device-width}

Note: it is enough to set the width as the height will be resolved from the width, as shown in the example above.

Viewport Descriptors

CSS Device Adaptation

Understanding Viewport

@-ms-viewport is used for css Device Adaptation.

@-ms-viewport Rule

Viewport Properties Supported by @-ms-viewport
Keyword ValueMeaning
width

Indicates the preferred viewport width used in determining the size of the initial containing block. Can be one of the following keyword values:

  • auto: the value is calculated based on the display device's normal mode of operation.
  • device-width: the width of the screen in css pixels at a zoom factor of 100%.
  • device-height: the height of the screen in css pixels at a zoom factor of 100%.
  • length: a positive absolute or relative length.
  • percentage: a positive percentage value relative to the width or height of the initial viewport at a zoom factor of 100%, for horizontal and vertical lengths respectively.
height

Indicates the preferred viewport width used in determining the size of the initial containing block. Can be one of the following keyword values:

  • auto: the value is calculated based on the display device's normal mode of operation.
  • device-width: the width of the screen in css pixels at a zoom factor of 100%.
  • device-height: the height of the screen in css pixels at a zoom factor of 100%.
  • length: a positive absolute or relative length.
  • percentage: a positive percentage value relative to the width or height of the initial viewport at a zoom factor of 100%, for horizontal and vertical lengths respectively.

Example


@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px layout goes here */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
  @-ms-viewport { width: 400px; }
  /* CSS for 400px layout goes here */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
  @-ms-viewport { width: 640px; }
  /* CSS for 640px layout goes here */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
  @-ms-viewport { width: 1024px; }
  /* CSS for 1024px layout goes here */
}

@media screen and (min-width: 1366px) {
  /* CSS for 1366px layout goes here */
}

A Windows Store app using JavaScript by default, automatically scales content when the window is narrower than 1024px, which primarily includes the snapped state and portrait mode. If @-ms-viewport specified, it overrides default scaling.

No Scaling Example

When scaling is unwanted/desired, the device-width keyword value can be used, signifiying that the web document is optimized to work regardless of the dimensions of the window.


@-ms-viewport{width:device-width}

Note: when using device-width ensure that the document continues to function in different window sizes, including the narrow snapped state and portrait modes.

References and Resources