Viewport

What is a mobile viewport?

Most importantly, this is a meta tag that Google looks for and uses to determine if your website is Mobile Friendly. If Google doesn't find this meta tag, you won't pass the Google Mobile Friendly test, which can negatively affect your positioning in mobile search results.

What the mobile viewport does

From a functional point of view, the mobile Viewport sets the initial zoom level of a web page when viewed on a mobile device. Without a viewport, mobile devices render the page at a typical desktop image width, scaled to fit the screen. This means that when viewed on a mobile device, your website is simply a tiny, unreadable version of your website layout. The mobile viewport should be located in the header area on every page of your website.

An important aspect to understand is that the mobile Viewport-meta tag is ignored by desktop browsers. Inserting this meta tag does not change the desktop view of your website.

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

Mobile view code

The basic or default usage 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 adjust the width of the screen in device-independent pixels. As mentioned above, this is particularly useful for responsive designs as it allows the page to adapt content to different screen sizes and to adapt to the orientation of a phone, portrait or landscape.

The setting "initial scale=1" assigns 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 the first page loads.

Advanced settings - Max. Zoom

It is possible to set the minimum and maximum zoom level of a web page and completely exclude the user's ability to zoom a page. These can be useful features in some cases where you need to control the display size, but are not typically used and are not usually recommended. It is also possible to set the viewport to a fixed width, which can be useful when creating a web application for a specific device, such as in a commercial environment. Another possibility may be when a website is not created with a responsive design, but instead has a separate mobile-only set of pages.