Viewport optimization

The page viewport is the area into which the page is rendered. Any aspects of the page that are relative to the size of the containing block are computed relative to the size of this area. MCS can render pages in two modes with respect to the viewport: fixed and dynamic. In fixed mode the size of the viewport is fixed to the size of the user agent viewport (i.e. the area within the device through which the user views the visible area of the page) in the default orientation as specified by the device repository. In this case orientation changes do not affect the size of the viewport. In dynamic mode the size of the viewport is the same as the user agent viewport. In this case orientation changes can cause the page to be reformatted.

Note:

On devices that do not support dynamic mode the two modes are equivalent.

Resizing pages

The mcs:page-supports-resize meta property allows page authors to influence the mode in which MCS renders pages. By default, the value of this property is set to 'false', which means that MCS will render a fixed-size page and do whatever is necessary to display the page correctly on the device. The mcs:page-supports-resize meta property set to 'true' indicates that the author would rather have the viewport operate in dynamic mode than in fixed mode. In this case, MCS will modify the device specific meta properties that control the viewport so that the properties do not specify a fixed-size viewport, i.e. MCS will not try to prevent client-side resizing from occurring. Please note that the meta property expresses the author's preference, it does not guarantee that the preferred mode is supportable on the target device. If a specific mode is not supported on the target device, then MCS will switch to the other mode.

Rendering pages

MCS follows several guidelines when rendering pages. They are guidelines rather than strict rules as there needs to be some flexibility to enable consistent behavior across devices. The guidelines are roughly in order of priority.

The aspect ratio of the content must be preserved.
The page must be initially displayed at the correct size, i.e. zoom level of 1.0, unless the browser allows the user to specify a default zoom level in which case the page should be displayed at that zoom level.
The content of the page should fill the whole of the available user agent viewport.
Changing orientation should preserve the content on the edge.
Changing orientation twice, e.g. from portrait to landscape and back to portrait, should display the same content at the same position and zoom level as when started.
Zoom level, either the initial level used by the page, or the level set by the user when scaling should be maintained by any changes in user agent viewport, e.g. changing orientation should not cause a change in the zoom level.
Users should not have to do any horizontal scrolling/panning even after orientation change.
Users should be able to zoom the content up to twice its original size.

The guidelines apply to both forms of the viewport, e.g. fixed and dynamic. Page authors can also influence these guidelines using the mcs:viewport-scaling-mode meta property.

Fixed viewport

The size of the fixed viewport is determined by the viewport policies. The behavior of the viewport when orientation changes is dependent on the default orientation set in the device repository, i.e. it is not affected by the actual orientation of the device when the page is loaded. Whichever orientation is the default one, there are two alternative approaches, one that requires scaling and one that does not. At the moment the choice as to which approach is taken is based purely on device capabilities, the page author has no direct way of influencing the behavior. If the target device supports both methods, then the one that does not require scaling is preferred.

When the default orientation is portrait, then loading the page while initially in landscape or loading in portrait and subsequently changing orientation from portrait to landscape, can either: zoom the content to fit the width of the landscape, or keep the same zoom level and align the content horizontally. The first approach has the advantage that it follows guideline 3 and so uses all the available viewport but has the disadvantage that less content is visible on the page and is an exception to guideline 6. The second approach has the advantage that it shows as much content as possible but has the disadvantage that it is an exception to guideline 3.

When the default orientation is landscape, then loading the page while initially in portrait or loading in landscape and subsequently changing orientation from landscape to portrait, can either: zoom the content to fit the width of the portrait, or keep the same zoom level and align the content horizontally. The first approach has the advantage that it follows guideline 3 and so uses all the available viewport but has the disadvantage that the content is smaller and so will require user scaling and panning to view properly. The second approach has the advantage that it shows as much content as possible but has the disadvantage that it is an exception to guideline 7.

Dynamic viewport

In this mode changes in the orientation will reformat the page content to take advantage of the different viewport size. Note that the user may want zoom the page in, i.e. make the content larger. An application author can explicitly prohibit user zooming by setting the mcs:viewport-scaling-mode meta property to 'disabled'.

Zooming in/out

The mcs:viewport-scaling-mode property specifies whether or not the user can zoom the page in and out. The default value of 'auto' indicates that the page should support user zooming where possible unless it breaks the rendering guidelines. The value of 'user', on those devices that support user zooming, changes the guideline 8 from should to must. The value of 'disabled', on those devices that support user zooming and support disabling user zooming, changes the guideline from should to should not.

The following feature indicates whether the device supports user scaling:

mcs:viewport#UserScaling

The following feature indicates whether the device supports disabling the user scaling:

mcs:viewport#DisableUserScaling

The mcs:viewport-scaling-mode property is associated with the document, and therefore it is only valid in the head section of the document, and must have no about attribute.