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

CSS

Claudine Bananal
Claudine Bananal
1,756 Points
Posted by Claudine Bananal
Claudine Bananal
1,756 Points

Viewport Meta Tag

So in the video, it says that we use the viewport meta tag because without it, the desktop layout will be rendered in mobile devices. I was wondering why when there's already declarations stated in our media queries? I thought these media queries specifically tells the site what to do depending on the user's browser's size.

2 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

The viewport meta tag sets the viewport. The most common is to set the viewport to the devices width. When media queries know how wide the viewport is, they can act and react.

When the viewport isn't define, there isn't anything to trigger the media query fire.

The meta viewport tag creates "sidelines", and the media queries play within those sidelines to keep from going out of bounds. Without there are no sidelines, just a big wide open field, nothing to every call out of bounds on.

Does that make sense?

Claudine Bananal
Claudine Bananal
1,756 Points
Claudine Bananal
Claudine Bananal
1,756 Points

Thank you! I was just confused because before we added the meta tag, the media queries were successfully reacting relative to the size of the browser, when Nick was increasiing and/or decreasing the browser size. I thought it was automatic.

Thanks again.

Dan Henning
Dan Henning
8,691 Points
Dan Henning
Dan Henning
8,691 Points

I think Kevin is correct: the viewport contributes to other design decisions that we make, including media queries. There must be a base to start from. From that point, we make adjustments according to screen width, orientation, and other considerations.

If you really want the nitty-gritty details, please read "A Tale of Two Viewports (Parts One and Two)": http://www.quirksmode.org/mobile/viewports.html