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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Pawel Cebula
Pawel Cebula
4,281 Points
Posted by Pawel Cebula
Pawel Cebula
4,281 Points

Can someone provide an explanation for the viewport/meta code?

I rewatched the part of the video about adding meta viewport tag and I still don't understand it. Why would a mobile device show the desktop version if we didn't add this? According to the media code we have written, a screen with less than 480px would display the default (mobile) version).

Fadli Hidayatullah
Fadli Hidayatullah
2,691 Points

The main idea is that, it instructs to the mobile device to display in mobile layout instead of desktop layout, when you don't add this to your HTML file, and you fire up your mobile browser and open your site, it will display the desktop layout with smaller scale of content, but when you add it to your HTML file, it will render the mobile layout that fits to your media queries result.

1 Answer

Samantha Inmon
Samantha Inmon
5,127 Points
Samantha Inmon
Samantha Inmon
5,127 Points

Here's a good explanation of why the viewport tag is important:

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

The mobile phones try to zoom out on the website to display as much content as possible by using a virtual viewport that goes higher in pixel count than the physical screen. The viewport meta tag just tells it not to zoom out on your site and instead display the mobile version you created.