Mobile Layout Control

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:

Attribute | Description| —— | —— |width| The width of the virtual viewport of the device. Values1: device-width or the actual width in pixels, like 480 |height| The height of the virtual viewport of the device. Values2: device-height or the actual width in pixels, like 600 |initial-scale| The initial zoom when the page is loaded. 1.0 does not zoom. |minimum-scale| The minimum amount the visitor can zoom on the page. 1.0 does not zoom. |maximum-scale| The maximum amount the visitor can zoom on the page. 1.0 does not zoom. |user-scalable| Allows 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.