This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

@viewport

Summary

Specifies the size, zoom factor, and orientation of the viewport.

Examples

@media screen and (max-width:400px) {
    @-ms-viewport{
        width:320px;
        /* the viewport for small devices is set to 320px  */
    }
    @-o-viewport {
        width: device-width;
    }
    @viewport {
        width: device-width;
    }
}

Notes

Remarks

You can use the @viewport rule in tandem with media queries to help optimize your layout. Typically, you nest the @viewport rule inside the media query, as shown in the following pseudocode snippet: @media [media query logic here] { @viewport { [viewport properties here] } [CSS for this layout combination here] }

Syntax

@viewport { viewport-properties }

Parameters

viewport-properties
One or more property declarations, each with a trailing semicolon. Only the following viewport properties are supported.
Value Meaning
width

Indicates the preferred viewport width used in determining the size of the initial containing block. Can be one of the following 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 height used in determining the size of the initial containing block. See width for a list of possible values.

Related specifications

CSS Device Adaptation
Working Draft

Attributions