How to declare and use the @viewport rule?

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 a lot on the device.

Source: link

Meta Tag Viewport

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

It looks like this:

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

Inside the content="" you can enter a series of comma-separated values, but let's focus on the basics right now.

For example, if your mobile layout is set to 320px, you can specify the viewport in this 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 should type:

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

To make sure that 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. Are they able to read everything in the best way possible?

Another option is to configure ViewPort directly through CSS, including this is Microsoft's recommendation for Internet Explorer (ie10 and above)

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

SEM Viewport

COMViewport

HerearetwogreatarticlesinPortuguesethathaveservedasareferenceandwillhelpyoualot!

link

link