7.2. Viewport Metadata

The viewport is the area in which your webpage is drawn. To define the properties of the viewport for your webpage:
  1. Use the "viewport" property in an HTML <meta> tag. Place this in the document <head>.
  2. Define multiple viewport properties in the content attributes of the <meta> tag.
You can define the following options:
  • The height and width of the viewport
  • The initial scale of the page
  • The target screen density
Here is the viewport setting used in the RichFaces Mobile Showcase:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> 
This resizes the application when rotated to landscape or portrait mode and zooms the content appropriately.
Other device browsers may support additional metadata. For example, Mobile Safari supports Apple specific Meta-Tag keys which allow you to set full screen mode and adjustments to other visual elements.
<!-- enable full-screen mode -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- controls the appearance of the status bar in full-screen mode -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>