CSS Device Adaptation (viewport) support in Opera Presto 2.7

W3C reference
W3C CSS Device Adaptation Editor's Draft 2 November 2010
On this page...
The @viewport rule
Viewport properties
Viewport META element

Opera Presto provides support for W3C CSS Device Adaptation with the following conditions and exceptions:

The @viewport rule

Support: Yes (implemented with the Opera -o- vendor extension)

The @viewport at-rule consists of the @-keyword followed by a block of property declarations describing the viewport. The property declarations inside an @viewport rule are per document properties and there is no inheritance involved.

Note: @viewport is currently implemented with an Opera prefixed -o- vendor extension (@-o-viewport), and media query evaluation for @viewport is not compliant with the current draft.

Example

This example sets the viewport to fit the width of the device. Note that it is enough to set the width as the zoom and height will be resolved from the width.

@viewport {
  width: device-width;
}

Viewport properties

Each property is hyperlinked to its place in the online W3C CSS Device Adaptation Editor's Draft 2 November 2010 webpage.

Property Values Initial Percentages Media Computed value Description Support
height <viewport-length>{1,2} See individual properties. See individual properties. visual, continuous See individual properties. This is a shorthand property for setting both min-height and max-height. Yes
max-height <viewport-length> auto Refer to the height of the initial viewport. visual, continuous auto, device-width, device-height, an absolute length, or a percentage as specified. Specifies the maximum height of the viewport that is used to set the size of the initial containing block. Yes
max-width <viewport-length> auto Refer to the width of the initial viewport. visual, continuous auto, device-width, device-height, an absolute length, or a percentage as specified. Specifies the maximum width of the viewport that is used to set the size of the initial containing block. Yes
max-zoom auto | <number> | <percentage> auto The zoom factor itself visual, continuous auto, or a positive number or percentage as specified. Specifies the largest allowed zoom factor. It is used as input to the constraining procedure, but also to limit the allowed zoom factor that can be set through user interaction. Yes
min-height <viewport-length> auto Refer to the height of the initial viewport. visual, continuous auto, device-width, device-height, an absolute length, or a percentage as specified. Specifies the minimum height of the viewport that is used to set the size of the initial containing block. Yes
min-width <viewport-length> auto Refer to the width of the initial viewport. visual, continuous auto, device-width, device-height, an absolute length, or a percentage as specified. Specifies the minimum width of the viewport that is used to set the size of the initial containing block. Yes
min-zoom auto | <number> | <percentage> auto The zoom factor itself visual, continuous auto, or a positive number or percentage as specified. Specifies the smallest allowed zoom factor. It is used as input to the constraining procedure, but also to limit the allowed zoom factor that can be set through user interaction. Yes
orientation auto | portrait | landscape auto Not applicable visual, continuous auto, portrait, or landscape as specified. This property is used to request that a document is displayed in portrait or landscape mode. No
user-zoom zoom | fixed zoom Not applicable visual, continuous zoom or fixed as specified. Specifies if the zoom factor can be changed by user interaction or not. Yes
width <viewport-length>{1,2} See individual properties. See individual properties. visual, continuous See individual properties. This is a shorthand property for setting both min-width and max-width. Yes
zoom auto | <number> | <percentage> auto The zoom factor itself visual, continuous auto, or a positive number or percentage as specified. Specifies the initial zoom factor for the window or viewing area. Yes

Viewport META element

This section describes a mapping from the content attribute of the viewport META element to the properties of the @viewport rule described earlier.

UA stylesheet example

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

Recognized properties

Property Description Support
width The width viewport META property is translated into the width shorthand property, effectively setting the min and max properties to the same value. Yes
height The height viewport META property is translated into height shorthand property, effectively setting the min and max properties to the same value. Yes
initial-scale This property is translated into zoom. Yes
minimum-scale This property is translated into min-zoom. Yes
maximum-scale This property is translated into max-zoom. Yes
user-scalable This property is translated into user-zoom. Yes

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.