How to declare and use the @viewport rule?

Question

I’ve been reading that the meta viewport has better implementation by Rule viewport CSS, but it’s still confusing for me...

Answer 1

The viewport is the area where your website appears. It is the white area of the window when you open the browser. The viewport will always be the size of the window. But how the elements are rendered will depend heavily on the device.

Source: https://tableless.com.br/manipulando-metatag-viewport/

A Meta Tag Viewport

Use the meta tag viewport, introduced by Apple, and then adopted and developed by more people.

She looks like this:

<meta name="viewport" content="">

Within the content="" you can enter a series of comma-separated values, but let’s focus on the fundamentals now.

For example, if your mobile layout is set to 320px, you can specify the viewport that way:

<meta name="viewport" content="width=320">

For flexible layouts it is more practical to base the width of your viewport on the device in question, to match the width of the layout to the width of the device you must type:

<meta name="viewport" content="width=device-width">

To make sure your layout will be shown as you planned, you can set the initial zoom level. This for example:

<meta name="viewport" content="initial-scale=1">

... will ensure that after opening, the layout will be displayed correctly in 1:1 scale. No zoom will be applied. You can go further and avoid any zoom by the user:

<meta name="viewport" content="maximum-scale=1">

Note: Before applying the Maximum-Scale parameter, consider whether you really should be preventing users from zooming in. They are able to read everything as best as possible?

Another option is to set up Viewport directly by CSS, including this is Microsoft’s recommendation for Internet Explorer (ie10 and higher)

@viewport{
    zoom: 1.0;
    width: device-width;
}

SEM Viewport

WITH Viewport

Here are two excellent articles in Portuguese that served as a reference and will help you a lot!

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

https://webdesign.tutsplus.com/pt/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972