Where should I implement “viewport”(HTML, CSS or both)?

Question

I'd like to know what is more common or useful.

Is it the typical viewport meta tag in HTML or in CSS?

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

or

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

Is it even possible to use just both? And please give me the code that is most useful for compatibility for mobile devices, also when using a mobile device across.

Thank you in advance!!

Answer 1

The typical place to set viewport metadata is in HTML.

The common practice for addressing mobile devices is just like the HTML you included above, ie:

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

or also as

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

See this CSS-Tricks post for more information on setting viewport metadata .

Answer 2

You should always have it on the html. Read this for more info

Answer 3

Viewport is used for RESPONSIVE PURPOSES, in my opinion the best way to use this is in the HTML, just in special cases you will need to use VIEWPORT in CSS JUST SPECIAL CASES .

Viewport define how your web page will be behave in different devices [ screens ]

For more information please read this documentation about viewport

You can use this VIEWPORT as standard and change in some cases.

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