The 'zoom' descriptor

Name: zoom
For: @viewport
Value: auto | <> | <>
Initial: auto
Percentages: The zoom factor itself
Computed value: auto, or a non-negative number or percentage as specified

auto

The zoom factor is UA-dependent. The UA may use the size of the area of the canvas on which the document is rendered to find that initial zoom factor. See this section for a proposed way of handling ''zoom/auto'' values for 'zoom'.

<>

A non-negative number used as a zoom factor. A factor of 1.0 means that no zooming is done. Values larger than 1.0 gives a zoomed-in effect and values smaller than 1.0 a zoomed-out effect.

<>

A non-negative percentage value used as a zoom factor. A factor of 100% means that no zooming is done. Values larger than 100% gives a zoomed-in effect and values smaller than 100% a zoomed-out effect.

The 'min-zoom' descriptor

Name: min-zoom
For: @viewport
Value: auto | <> | <>
Initial: auto
Percentages: The zoom factor itself
Computed value: auto, or a non-negative number or percentage as specified

auto

The lower limit on zoom factor is UA dependant. There will be no minimum value constraint on the 'zoom' descriptor used in the constraining procedure

<>

A non-negative number limiting the minimum value of the zoom factor.

<>

A non-negative percentage limiting the minimum value of the zoom factor.

The 'max-zoom' descriptor

Name: max-zoom
For: @viewport
Value: auto | <> | <>
Initial: auto
Percentages: The zoom factor itself
Computed value: auto, or a non-negative number or percentage as specified

auto

The upper limit on zoom factor is UA dependant. There will be no maximum value constraint on the 'zoom' descriptor used in the constraining procedure

<>

A non-negative number limiting the maximum value of the zoom factor.

<>

A non-negative percentage limiting the maximum value of the zoom factor.

The 'user-zoom' descriptor

Name: user-zoom
For: @viewport
Value: zoom | fixed
Initial: zoom
Percentages: N/A
Computed value: as specified

zoom

The user can interactively change the zoom factor.

fixed

The user cannot interactively change the zoom factor.

The 'orientation' descriptor

Name: orientation
For: @viewport
Value: auto | portrait | landscape
Initial: auto
Percentages: N/A
Computed value: as specified

auto

The UA automatically chooses the orientation based on the device's normal mode of operation. The UA may choose to change the orientation of the presentation when the device is tilted.

portrait

The document should be locked to portrait presentation.

landscape

The document should be locked to landscape presentation.

Constraining viewport descriptor values

Definitions

The procedure

Resolve min-zoom and max-zoom values

1. If min-zoom is not ''zoom/auto'' and max-zoom is not ''zoom/auto'', set max-zoom = MAX(min-zoom, max-zoom)

Constrain zoom value to the [min-zoom, max-zoom] range

1. If zoom is not ''zoom/auto'', set zoom = MAX(min-zoom, MIN(max-zoom, zoom))

Resolve non-''viewport-length/auto'' lengths to pixel lengths

1. Resolve absolute lengths and percentages to pixel values for the 'min-width', 'max-width', 'min-height', and 'max-height' descriptors.

Resolve initial width and height from min/max descriptors

1. If min-width or max-width is not ''viewport-length/auto'', set width = MAX(min-width, MIN(max-width, initial-width))
2. If min-height or max-height is not ''viewport-length/auto'', set height = MAX(min-height, MIN(max-height, initial-height))

Resolve width value

1. If width and height are both ''viewport-length/auto'', set width = initial-width
2. Otherwise, if width is ''viewport-length/auto'', set width = height * (initial-width / initial-height), or width = initial-width if initial-height is 0.

Resolve height value

1. If height is ''viewport-length/auto'', set height = width * (initial-height / initial-width), or height = initial-height if initial-width is 0.

Media Queries

“To avoid circular dependencies, it is never necessary to apply the style sheet in order to evaluate expressions. For example, the aspect ratio of a printed document may be influenced by a style sheet, but expressions involving 'device-aspect-ratio' will be based on the default aspect ratio of the user agent.”

1. Cascade all ''@viewport'' rules using the ''initial viewport'' size for values and evaluations which rely on viewport size
2. Compute the ''actual viewport'' from the cascaded viewport descriptors
3. Cascade all other rules using the ''actual viewport'' size

The rationale for using the viewport descriptors obtained from applying the ''@viewport'' rules for evaluating media queries for style rules, is that media queries should match the ''actual viewport'' that the document will be layed out in and not the initial or the one specified in the UA stylesheet. Consider the example below given that the UA stylesheet has a viewport width of 980px, but an ''initial viewport'' width of 320px. The author has made separate styles to make the document look good for initial containing block widths above or below 400px. The ''actual viewport'' used will be 320px wide, and in order to match the styles with the ''actual viewport'' width, the viewport resulting from applying the ''@viewport'' rules should be used to evaluate the media queries.

        @viewport {
            width: auto;
        }

        @media screen and (min-width: 400px) {
            div { color: red; }
        }

        @media screen and (max-width: 400px) {
            div { color: green; }
        }
    

        @media screen and (width: 397px) {
            div { color: green; }
        }

        @viewport {
            width: 397px;
        }
    

        @viewport {
            width: 397px;
        }

        @media screen and (width: 397px) {
            @viewport {
                width: 500px;
            }
        }

        @media screen and (width: 397px) {
            div { color: green; }
        }
    

CSSOM

Interface CSSRule

partial interface CSSRule {
    const unsigned short VIEWPORT_RULE = 15;
};

Interface CSSViewportRule

[Exposed=Window]
interface CSSViewportRule : CSSRule {
    readonly attribute CSSStyleDeclaration style;
};

style

This attribute represents the viewport descriptors associated with this ''@viewport'' rule.

Viewport <META> element

@viewport {
    width: extend-to-zoom 980px;
    min-zoom: 0.25;
    max-zoom: 5;
}

Note that these values might not fit well with all UAs. For instance, with a min-zoom of 0.25 you will be able to fit the whole width of the document inside the window for widths up to 1280px on a 320px wide device like the original iPhone, but only 960px if you have a 240px display (all widths being given in CSS pixel units).

Properties

• width
• height
• initial-scale
• minimum-scale
• maximum-scale
• user-scalable

Parsing algorithm

• Horizontal tab (0x09)
• Line feed (0x0a)
• Carriage return (0x0d)
• Space (0x20)

• Comma (0x2c)
• Semicolon (0x3b)

    Parse-Content(S)
    i ← 1
    while i ≤ length[S]
        do while i ≤ length[S] and S[i] in [whitespace, separator, '=']
            do i ← i + 1
        if i ≤ length[S]
            then i ← Parse-Property(S, i)

    Parse-Property(S, i)
    start ← i
    while i ≤ length[S] and S[i] not in [whitespace, separator, '=']
        do i ← i + 1
    if i > length[S] or S[i] in [separator]
        then return i
    property-name ← S[start .. (i - 1)]
    while i ≤ length[S] and S[i] not in [separator, '=']
        do i ← i + 1
    if i > length[S] or S[i] in [separator]
        then return i
    while i ≤ length[S] and S[i] in [whitespace, '=']
        do i ← i + 1
    if i > length[S] or S[i] in [separator]
        then return i
    start ← i
    while i ≤ length[S] and S[i] not in [whitespace, separator, '=']
        do i ← i + 1
    property-value ← S[start .. (i - 1)]
    Set-Property(property-name, property-value)
    return i

1. If a prefix of property-value can be converted to a number using strtod, the value will be that number. The remainder of the string is ignored.
2. If the value can not be converted to a number as described above, the whole property-value string will be matched with the following strings case-insensitively: yes, no, device-width, device-height
3. If the string did not match any of the known strings, the value is unknown.

''extend-to-zoom''

    extend-width = initial-width / extend-zoom
    extend-height = initial-height / extend-zoom

        <meta name="viewport" content="width=500, height=600">
    

        @viewport {
            width: extend-to-zoom 500px;
            height: extend-to-zoom 600px;
        }
    

        <meta name="viewport" content="initial-scale=1.0">
    

        @viewport {
            zoom: 1.0;
            width: extend-to-zoom;
        }
    

        <meta name="viewport" content="initial-scale=2.0,
        height=device-width">
    

        @viewport {
            zoom: 2.0;
            width: auto;
            height: extend-to-zoom 100%;
        }
    

        <meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">
    

        @viewport {
            width: 480px;
            zoom: 2.0;
            user-zoom: zoom;
        }
    

    zoom = MAX(initial-width / rendered-width, initial-height / rendered-height)

        @viewport {
            min-width: 1024px;
        }
    

        @viewport {
            min-width: 980px;
        }
    

{
    "Algorithms": {
        "authors": [
            "Thomas H. Cormen; et al"
        ],
        "title": "Introduction to Algorithms, Second Edition, MIT Press",
        "publisher": "MIT Press"
    }
}