HTML Mobile Layout Control


Example

Common mobile-optimized sites use the <meta name="viewport"> tag like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

The viewport element gives the browser instructions on how to control the page's dimensions and scaling based on the device you are using.

In the above example, content="width=device-width means that the browser will render the width of the page at the width of its own screen. So if that screen is 480px wide, the browser window will be 480px wide. initial-scale=1 depicts that the initial zoom (which is 1 in this case, means it does not zoom).

Below are the attributes this tag supports:

AttributeDescription
widthThe width of the virtual viewport of the device.
Values1: device-width or the actual width in pixels, like 480
heightThe height of the virtual viewport of the device.
Values2: device-height or the actual width in pixels, like 600
initial-scaleThe initial zoom when the page is loaded. 1.0 does not zoom.
minimum-scaleThe minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scaleThe maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalableAllows the device to zoom in and out. Values are yes or no. If set to no, the user is not able to zoom in the webpage. The default is yes. Browser settings can ignore this rule.

Notes:

1 The width property can be either specified in pixels (width=600) or by device-width (width=device-width) which represents the physical width of the device's screen.

2 Similarly, the height property can be either specified in pixels (height=600) or by device-height (height=device-height) which represents the physical height of the device's screen.