What is a Mobile Viewport?

I have had a few inquiries from other web developers ask me what is a mobile viewport and what does it do?

Most important of all, this is a meta tag that Google looks for and uses when determining if your site is Mobile Friendly. If Google does not find this meta tag, then you will not pass the Google Mobile Friendly test which can negatively impact your positioning in mobile search results.

What the Mobile Viewport Does

From a functional stand point, the mobile viewport sets the initial zoom level of a webpage, when viewed with a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. That means your website, when viewed on a mobile phone, will simply be a tiny, illegible version of your website layout. The mobile viewport should be on each page of your website in the head section.

One key aspect to understand is that the mobile viewport meta tag is ignored by desktop browsers. Including this meta tag will not alter the desktop view of your site.

The Mobile Viewport is most useful when used within a responsive website design scheme.

Mobile Viewport Code

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.

Advanced Settings – Max Zoom

It is possible to set the minimum and maximum zoom level of a web page as well as completely eliminating the users ability to zoom a page. These may be useful features in some case where you need to control the display size, but are not typically used and not normally recommended. It is also possible to set the viewport to a fixed width, which could be useful if a web app is built for a specific device such as in a commercial setting. Another instance may be when a website is not built with a responsive design, but instead has a separate mobile only set of pages.