The mobile viewport meta tag determines how mobile devices handle the scaling of a web page.
The size of the viewport is the area visible on the screen.
For desktop computers and laptops the size, in pixels, is a direct mapping.
For mobile browsers the default handling of a web page is to zoom out to show the full page width, with vertical scrolling as required.
For mobile devices the layout of the web page, content wrapping and page scrolling, is determined by the viewport.
The example below shows the meta viewport code, with an initial scaling of half the full size and the user is unable to zoom in and out.
<meta name="viewport" content="initial-scale=.5, user-scalable=no">
The table below shows the properties and a description of their associated parameters.
| Property | Description |
|---|---|
| width | The width of the virtual viewport. A number defines the pixel width. Alternatively “device-width” sets the viewport to the physical width of the device’s screen. |
| height | The height of the virtual viewport. A number defines the pixel height. Alternatively “device-height” sets the viewport to the physical height of the device’s screen. |
| initial-scale | The initial zoom of the webpage, where a value of 1.0 means no zoom. |
| minimum-scale | The minimum scale by which the user can zoom out from the web page. A value of 1.0 means that zooming is not possible. |
| maximum-scale | The maximum scale by which the user can zoom into the web page. A value of 1.0 means that zooming is not possible. |
| user-scalable | Whether the user us allowed to zoom in and out of the web page. Set to yes or no. |
Without the use of a viewport the mobile web browser will render the page zoomed out so that it fits on the screen. Using a viewport the starting width can be configured and the browser will show a section, or all of the page, dependant upon the configuration.
Defining the viewport to have the width of device-width will cause the browser to render the page according to the responsive CSS rules of the website.
Take care when configuring the viewport. Using the wrong combination of parameters can leave the web page difficult to view, requiring lots of scrolling. Setting any of maximum-scale=1; minimum-scale=1; or to 1 or initial-scale=1 will prevent the page from zooming, leaving its size fixed.
The rendering specific to the mobile sizes is included in the CSS files. Here amendments are given to adjust the page according to the detected page orientation and width.
The CSS below is used by the browser if the device is orientated vertically and the minimum width is 800px. Outer and Inner are two divs wrapping the page content. Their maximum width is reduced to ensure that the page content is displayed, at a reasonable size, within the browser screen. The menu is turned off, allowing a simplified menu to show at the top of the screen
@media only screen and (min-width: 800px) and (orientation:portrait) {
#Outer{max-width:800px;}
#Inner{max-width:780px;}
#menu {display: none;}
#menuSimple { display: block; }
}
