Meta - Viewport

What is Viewport?

One of the concepts that emerged as a result of the need to create websites suitable for all kinds of devices is viewport.

The area occupied by our web page on the user's device is called viewport. Of course, this area can be of different sizes on each device. Even when you collapse or expand your browser window, the viewport area also changes.

The concept of viewport is one of the innovations that came with Html5, and we can make basic adjustments such as scaling and orientation of the viewport using a simple meta tag.

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

It is usually used as above. 

width=device-width specifies that scaling will be based on the user's screen. 

The initial-scale=1 part determines the amount of scaling (zoom). By giving a value of 1, it is specified that our page should occupy the screen.

When you use the viewport, you can visit and examine it with small screen devices to see how your page is affected.

Of course, it will not be enough to use the viewport tag to get mobile responsive websites. You can also review other CSS topics on our site.

When our website is opened on users' screens, the horizontal scroll bar should not appear. Visitors will not like this, because our pages will be difficult to read and useless pages will appear.

With the use of viewport, it is possible to take precautions against horizontal scroll bars.

EXERCISES