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

user_10376590 0
Viewed 315

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!!

viewport css html
3 Answers

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.

user_21451030

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

user_55930240

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">

user_71025750
Related