Viewport meta tag in css

Question

In viewport meta tag in CSS for achieving responsive web design we set width = device-width like <meta name="viewport" content="width=device-width"> so that the page's width equal to that of the device's width , so that users do not have to scroll to see the page but what about the height ? Does the browser infer the height based on the width and make it device-height ???

Answer 1

The correct meta tag for a responsive website is the following:

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

The width=device-width part sets the width of the page to follow the screen-width of the device. The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser. You don't need to set a specific height, since window dimensions are always both scaled on change. But in case, you can change the content of the meta tag with:

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

Have a look here if you have more doubts.