CSS Device Adaptation (viewport) support in Opera Presto 2.8

W3C reference

W3C CSS Device Adaptation Editor's Draft 2 November 2010

Opera reference

An introduction to meta viewport and @viewport

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:

• Opera supports the:
  • Viewport meta property: target-densityDpi
  • -o- prefixed media feature: -o-device-pixel-ratio
  • devicePixelRatio property on the Window object
• @viewport is implemented with an Opera prefixed -o- vendor extension (@-o-viewport).
• The orientation property is not supported.
• The Media query evaluation for @viewport is not compliant with the current draft.

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