Search code examples
htmlcssviewport

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

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

Solution

  • 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.