CODEWITHSUNDEEP
htmlcssresponsive-designviewportdevice-width
titlu
titlu

Reputation: 129

Viewport meta tag in css

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

Upvotes: 3

Views: 4368

Answers (2)

Bipon Biswas
Bipon Biswas

Reputation: 11635

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

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

Read this https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag then hope clear everything.

Upvotes: 3

d_z90
d_z90

Reputation: 1263

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.

Upvotes: 3

Related Questions