Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,135 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

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

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