CSS 2.1 [CSS21] specifies an initial containing block for continuous media that has the dimensions of the viewport. Mobile/handheld device browsers have a viewport that is generally a lot narrower than a desktop browser window at a zoom level that gives a CSS pixel size recommended by CSS 2.1.
The narrow viewport is a problem for documents designed to look good in desktop browsers. The result is that mobile browser vendors use a fixed initial containing block size that is different from the viewport size, and close to that of a typical desktop browser window. In addition to scrolling or panning, zooming is often used to change between an overview of the document and zoom in on particular areas of the document to read and interact with.
Certain DOCTYPEs (for instance XHTML Mobile Profile) are used to recognize mobile documents which are assumed to be designed for handheld devices, hence using the viewport size as the initial containing block size.
Additionally, an HTML META tag has been introduced for allowing an author to specify the size of the initial containing block, and the initial zoom factor directly. It was first implemented by Apple for the Safari/iPhone browser, but has since been implemented for the Opera, Android, and Fennec browsers. These implementations are not fully interoperable and this specification is an attempt at standardizing the functionality provided by the viewport META tag in CSS.
The @viewport rule
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. Hence declarations using the ‘inherit’ keyword will be dropped. They work similar to @page properties and follow the cascading order of CSS. Hence, properties in @viewport rules will override properties from preceding rules. The declarations allow !important which will affect cascading of properties accordingly.
This example sets the viewport to fit the width of the device. Note that it is enough to set the width as the height will be resolved from the width.
@viewport { width: device-width; }
Viewport properties
| Property | Values | Initial | Applies to | Inh. | Percentages | Media |
|---|---|---|---|---|---|---|
| height | <viewport-length>{1,2} | See individual properties | N/A | N/A | See individual properties | visual, continuous |
| max-height | <viewport-length> | auto | N/A | N/A | Refer to the height of the initial viewport | visual, continuous |
| max-width | <viewport-length> | auto | N/A | N/A | Refer to the width of the initial viewport | visual, continuous |
| max-zoom | auto | <number> | <percentage> | auto | N/A | N/A | The zoom factor itself | visual, continuous |
| min-height | <viewport-length> | auto | N/A | N/A | Refer to the height of the initial viewport | visual, continuous |
| min-width | <viewport-length> | auto | N/A | N/A | Refer to the width of the initial viewport | visual, continuous |
| min-zoom | auto | <number> | <percentage> | auto | N/A | N/A | The zoom factor itself | visual, continuous |
| orientation | auto | portrait | landscape | auto | N/A | N/A | N/A | visual, continuous |
| resolution | auto | device | <resolution> | auto | N/A | N/A | N/A | visual, continuous |
| user-zoom | zoom | fixed | zoom | N/A | N/A | N/A | visual, continuous |
| width | <viewport-length>{1,2} | See individual properties | N/A | N/A | See individual properties | visual, continuous |
| zoom | auto | <number> | <percentage> | auto | N/A | N/A | The zoom factor itself | visual, continuous |
Complete example:
@viewport { min-width:auto; max-width:400px; width: device-width; min-height:10px; max-height:300px; height:device-height; zoom:1.0; min-zoom:0.5; max-zoom:1.5; user-zoom:fixed; /*The user can interactively change the zoom factor. */ user-zoom:zoom; /*The user can interactively change the zoom factor. */ orientation:auto; /*The UA automatically chooses the orientation based on the device's normal mode of operation.*/ orientation:portrait; /*The document should be locked to portrait presentation.*/ orientation:landscape; /* The document should be locked to landscape presentation. */ resolution:auto; /*Use the UAs CSS pixel resolution.*/ resolution:device; /*Use device resolution as the CSS pixel resolution. That is, have a 1-1 relationship between a CSS and a device pixel.*/ resolution:240dpi; /* Set the CSS pixel resolution to a fixed dpi or dpcm value. */ }
That’s pretty much it. You can find more details here.