Optimal Meta viewport

What is the meta viewport ?

The meta viewport is an element added to the HTML code that instructs the browser to control the display dimensions of a web page. This element allows the layout of the content to be responsive, i.e. it adapts to the screens of different user devices, mainly mobile devices, such as mobile phones and tablets for example.

Why is it important to have a meta viewport ? 

It is important to have a meta viewport because today, the majority of user searches are done from a mobile device. When a web page doesn't adapt to these devices, it makes the user experience difficult which penalizes its referencing.

How to optimize your meta viewport

The meta viewport must be declared in the HTML code at the <head> level : 

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

In order for the page content to fit on a mobile screen, it is necessary to define the meta viewport with the following 2 instructions, otherwise the browser will not perform the layout correctly :

  • the instruction "width" which controls the size of the window can be set in pixel width=600 or the value "device-width" which corresponds to the width of the window in pixel
  • the instruction "initial-scale" allows to define the initial zoom level when the page is loaded