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
Dan Addison
10,019 PointsWhy is the viewport meta tag necessary?
I'm not entirely clear on why we need to add the viewport meta tag. It does make sense to me that you'd want a responsive website to detect the viewport dimensions and thus render accordingly.... but hadn't Nick already dealt with this with the responsive.css file, changing the way the page displays at different breakpoints? I thought we'd already done enough to prevent the user having to "pan around" the pages on a smaller screen. Is the meta tag doing anything else to the pages in this scenario? Would the website not already look 'correct' if a user were to open it in a mobile device, even before the meta tag was added to the project, considering the instructions we put in our responsive.css file?
2 Answers
Brian Hayes
20,986 PointsThe viewport meta tag keeps measurements consistent between devices basically. This is so we can deal with UHD and retina devices that have double or so the pixels. With the viewport meta tag, even though an iPhone 5s has a viewport width of 640px, we can treat it like a width of 320px. We want this because displays like that aren't suppose to give you more pixels for the sake of more screen space, but for the sake of sharpness.
To sum up, on these devices, a pixel isn't a pixel, so we have to define the scale to be used to determine a pixel.
You can find more info here at MDN
Here's an article on CSS-Tricks that might be helpful as well
Kevin D
8,646 PointsYou should definitely give it a go yourself to see first-hand the differences!
If you don't add the meta tag and view it on a mobile device, the responsive css does do its job, but the design of the site looks like you've just zoomed out to fit onto the mobile device screen. However, once you apply the meta tag, it makes everything proportionate to the device you're on.
Dan Addison
10,019 PointsYeah you're right, I should be trying it first hand, good point! Thanks for answering.
Dan Addison
10,019 PointsDan Addison
10,019 PointsMakes sense, thank you for the answer!