Viewport is a necessary tag to display the HTML page correctly

Viewport – this is the screen that the user actually sees. A simple description of this parameter is measured by the size of the diagonal. In practice, the description of the visible area of the monitor page is a set of parameters, including diagonal, aspect ratio, and the number of pixels per unit area.

Viewport HTML – how a new task for the adaptive screen appeared

Obviously, small smartphones have the smallest diagonal, and large monitors have the largest. However, the current era was preceded by a time of less developed technology, so the variety of gadgets was less. The screen parameters did not differ significantly and there was no need to enter a new parameter in the page header. The state of the art allowed the use of both flexible and fixed markings. In fact, what difference does it make if the sites are still viewed under approximately the same conditions?

But the creation of a mobile device brought novelty to this issue. The gadget already has a wide range of parameters, including pixel resolution. Thus, the screen visibility area has become more variable, which posed a challenge for developers to adapt the site page to the device. Viewport HTML was created later. Initially, the issue was resolved by making changes to the site design file.

CSS3 – Today almost all devices support this specification. But it also has drawbacks. Due to the variety of screen resolutions, responsiveness has to be created for each parameter separately. Two smartphones may have an identical diagonal, but the number of dots per unit area may differ by a factor of two. This is exactly the difference that can be observed between Apple products.

Smartphone models from the same manufacturer differ in the number of dots on the screen by a factor of two. Inaccurate determination of font sizes and block outlines resulted in inconvenient horizontal scrolling. This caused great discomfort for Internet users.

Meta Viewport is a tool that takes into account the shortcomings of the CSS3 design file. Vertical scrolling is considered natural for any page. It is horizontal scrolling that causes inconvenience. The text is difficult to read if you have to constantly move it to the sides. This defect occurs precisely because of the inaccuracy in determining the width of the page. And the user can set the screen horizontally.

The parameter is added in the header of the HTML page. The example specifies two parameters: tag name and width. Viewport Meta Tag - this line allows you to set the exact width of the screen. Thanks to this, the text block completely covers the width of the screen.

Viewport device-width How to adapt a website to a smartphone screen, taking into account the font

Below is a simple example of a line that will save the situation. Tag options have many more options, but this is what the simple spelling looks like.

Viewport width The parameter tells the browser exactly how to process the page. In the above examples, we could notice a difference in defining the screen width.

The first example sets a fixed monitor screen width. This can be a positive integer between 200 and 1000 points. The second example adapts the page content to different screens.

Viewport height The first line specifies the screen height, an integer from 233 to 1000 pixels.

Page zoom options

The list of parameters indicates the main scaling methods. Important note - in practice, it is recommended to use only the first parameter, since the rest will make it difficult for the user to view the page and reduce the accessibility of the content.

• initial-scale – the original scale is displayed as a number from 0.1 to 1.0. The second case prohibits scaling the page content. Taking into account the characteristics of operating systems, it is recommended to use 1.0
• user-scalable – the user will be able to change the scale of the page. The value can be 1 or 0. It is recommended to use 1, which is the default number. This position allows the user to make changes to the page scale
• minimum-scale – the smallest viewing area, displayed with a range of numbers from 0.1 to 1.0. Some browsers set the scale by default, so it is recommended to set it to 1.0 to avoid unwanted surprises
• maximum-scale – the maximum size viewing area is indicated by a range from 0.1 to 1.0. Developers are recommended to set it to 1.0 to disable scaling and leave the ratio at 1:1

Where should the Viewport tag be located on an HTML page?

Head – This is the section of every HTML page that should contain the Viewport parameter. Please note that some browsers do not honor the page adaptation tag.

• Symbian
• Opera Mobile Mini
• Openwave

For such cases, old tags are used. Popular website builders such as WordPress do not automatically assign customization options. To resolve the issue, you need to use a special plugin. But this does not mean that the Viewport meta tag can not be written in the code. In this case, the search engine will take this into account as an error. Therefore, an indication of the scale must be written on the HTML page.