The viewport is the user’s visible area of a web page. The viewport varies with the device and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

This was not perfect!! But a quick fix.

The basic or standard use code for a mobile viewport meta tag is as follows:

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

The setting content=”width=device-width” instructs the page to match the screen’s width in device independent pixels. As mentioned before, this is most useful in responsive designs as this allows the page to reflow content to match different screen sizes and adjust to the orientation of a phone, landscape or portrait.

The setting “initial-scale=1” tells the browser to use an initial zoom scale of 1:1 between the device independent pixels and the CSS pixel settings.  This also allows the user to control the zoom level after initial page load.