« Back to Glossary Index

What is a 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 content="width=device-width" setting tells the page to adjust the width of the screen in device-independent pixels. As mentioned earlier, this is particularly useful for responsive designs, as it allows the page to adapt content to different screen sizes and adjust to a phone's orientation, portrait or landscape.

Die Einstellung “initial scale=1” weist den Browser an, einen anfänglichen Zoommaßstab von 1:1 zwischen den geräteunabhängigen Pixeln und den CSS-Pixeleinstellungen zu verwenden. Dies ermöglicht es dem Benutzer auch, die Zoomstufe nach dem Laden der ersten Seite zu steuern.

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.

« Back to Glossary Index

With top positions to the new sales channel.

Let Google work for you, because visitors become customers.

About the author

Social Media & Links:

Your free gift!

The SEO strategy

You want more visitors and better Google rankings?

Watch our free SEO strategy webinar now and understand where your SEO levers are and how to tackle them head on.