Common mobile-optimized sites use the
<meta name="viewport"> tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
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
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:
|The width of the virtual viewport of the device. |
|The height of the virtual viewport of the device. |
|The initial zoom when the page is loaded. 1.0 does not zoom.|
|The minimum amount the visitor can zoom on the page. |
|The maximum amount the visitor can zoom on the page. |
|Allows the device to zoom in and out. Values are |
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
height=600) or by
height=device-height) which represents the physical height of the device's screen.