Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Stavros Sofroniadis
Front End Web Development Techdegree Student 360 PointsAbout <meta name="viewport" content="width=device-width, initial-scale=1.0">
Dear Friends,
Can anybody assist what is<meta name="viewport? It is considered to make resnsponsive html pages or for other reason ise used? what does mean the following <meta> attributes:
name="viewport"
content="width=device-width,
initial-scale=1.0"
Any example will help very much,
Thank You,
1 Answer
Alan Brown
20,524 PointsFrom MDN webdocs… “The browser's viewport is the area of the window in which web content can be seen... Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page.”
Re: content width “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%.”
RE:initial-scale “ controls the zoom level when the page is first loaded.”
What all this means in the meta tag above is that, because you are using responsive design, you want to ensure the page loads unscaled and to the width of the device. The mobile browser does not need to shrink to fit a page that has a mobile layout.