Implementing "viewport" in HTML or CSS?

[Hip]

Hey guys,

 

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

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

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

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

And please give me the code that is most usefull for compatibility for mobile devices, also when using a mobile device across.

 

Thank you in advance!!

[AMTraxTGE]

The viewport is the area of the screen that the user can see. When you set in the meta tag the 'width', you are setting the width of the entire html document to the 'device-width'. The initial-scale is the zoom at which the page is first loaded by the browser.

 

Responsive Web Design Viewport - W3Schools

 

The viewport meta tag is mostly required for mobile-responsive applications and websites.

 

Media Quires are CSS styles that apply when a condition is true. 

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

When the screen is 600px or less. Styles in here will not get applied when larger to 600px

 

Responsive Web Design Media Queries - W3Schools