CODEWITHSUNDEEP
htmlcss
Jhon
Jhon

Reputation: 29

What's the use of <meta name="viewport" content="width=device-width">?

It's already asked question but I have still doubt. I made a web page using html, css and java script. When I used <meta name="viewport" content="width=device-width"> it's still same as when I was not used. So, my question is when is the correct time to use <meta name="viewport" content="width=device-width">.
And please guys don't fire on me. I really need help.

Upvotes: 1

Views: 3251

Answers (2)

Gianina Skarlett
Gianina Skarlett

Reputation: 55

You should use a responsive meta tag only if your website is designed to be responsive to different sizes of viewports.

A <meta> viewport element gives instructions to the browser on how to control the pages dimension and scaling.

The content="width=device-width" sets the width of the page to follow the screen-width of the device or viewport which will vary depending on the device. So it basically means that the browser will (probably) render the width of the page at the width of its own screen. (So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px or whatever that device does by default).

Hope this helps :)

This are great resources: https://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design http://bradfrost.com/blog/post/mobile-first-responsive-web-design/

and here is a collection of resources if you'd like to read a bit more about it:

https://bradfrost.github.io/this-is-responsive/resources.html

Upvotes: 3

Thibaut Dupont
Thibaut Dupont

Reputation: 237

Some moving pictures to illustrate the basic meta viewport.

As stated in one comment, there is some differences between CSS pixel and Screen size. Css Pixel Ratio (or Retina / HD screens / whatever marketing will call it) helps you calculate the available width available for your elements.

https://css-tricks.com/probably-use-initial-scale1/

Upvotes: 0

Related Questions