HTML: viewport demo

Viewport Meta tag

The viewport is a virtual area used by the browser rendering engine to determine how content is scaled and sized when it is initially rendered on the current screen. A viewport is defined as a META tag in the page HEAD element.

This page links to samples that demonstrate how the viewport meta tag affects browser rendering behaviour.

Known screen orientations

BlackBerry Bold 9810 640x480

BlackBerry Curve 8300 320x240

BlackBerry Bold 9000 480x320

BlackBerry Bold 9700 480x360

BlackBerry PlayBook 1024x600

Recommended viewport for WebWorks apps:

This viewport instructs the Web engine to disallow pinch-zoom (provides a more 'native app' feeling) and fits content to the given screen width, regardless of orientation:


				<meta name="viewport" content="user-scalable=no,initial-scale=1.0">

Width/Height property

The following examples demonstrate how the viewport width property causes content to be initially rendered on the screen :

Width = 100Page content displayed inside a viewport 100px wide (zoomed in)

Width = 800Page content displayed inside a viewport 800px wide (zoomed out)

Width = 360Page content displayed inside a viewport 360px wide (approx mobile width)

Width = device-widthPage content displayed inside a viewport as wide as the current screen

Width = 360, Height = 480

Scaling

The following examples demonstrate the scaling features of the viewport META tag :

user-scalable = noPrevent the user from scaling page using pinch-to-zoom

initial-scale = 2.0Page content displayed zoomed in on initial load.

minimum-scale = 2.0User can only zoom content IN to 2x magnification.

maximum-scale = 2.0User can only zoom content OUT to 2x magnification.

target-densitydpi=device-dpiAdjust zoom level to best fit current page DPI.