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 CSS Layout Techniques Positioning Schemes Relative Positioning

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

What does this meta tag in the head section of a mobile first layout page mean?

Hello!

Why should I include this below in the head section of a mobile first layout page? What does it mean? What does it do?

<meta name="viewport" content="width=device-width">

thanks

5 Answers

Christopher Blake Buck
Christopher Blake Buck
7,393 Points
Christopher Blake Buck
Christopher Blake Buck
7,393 Points

Mobile browsers try to fit the entire layout on screen by default. To do this they zoom out. You may have noticed this when visiting a site on mobile. You see the entire desktop layout, but you can't read the text because it's too small, so you zoom in.

When creating a responsive layout you don't want the mobile browser to zoom out by default. If it does it will display the desktop version, and your visitors will have to zoom in to interact with your site.

That meta tag tells the browser to keep the viewport size to the size of the device. The viewport is the portion of the browser where your page shows up.

I think your meta tag should also include an initial-scale value, as well. Both of those values will keep mobile browsers from zooming. Which means your, small screen, mobile friendly layout will be displayed when the page loads.

Here is a revised meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can read more at: ["Using the viewport meta tag to control layout on mobile browsers"]https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thank you Christopher! This is really detailed, and it helps to connect more dots. Thanks all!!

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

Hi Orange, the viewport tag while make your website adjust to a mobile device. Many times you will apply media queries in your css document but wont see any changes while viewing the site on your mobile device, this meta tag will tell the mobile device to adjust to a mobile display.

You can ready more about it in this link:

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Let me know if this helps you understand the viewport meta tag :)

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

That is correct Orange, there is a chance it would work without the meta tag on certain devices but without that meta tag you will have a lot of people that wouldn't be able to view the media queries changes. I had that happen to me when I did not use the meta tag and I was able to view the changes perfectly fine on my Iphone 5s on a chrome browser but my friend was not able to view the changes on his HTC one. So if you want to make a collective change and make sure that everyone would be able to view your changes on mobile devices you'll have to use that tag.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Idan,

just to confirm.

As I coding and testing my code in a browser on my laptop,I can definetely see the effects of media queries, but you are saying that for the media queries to work on a mobile, I need this rule below

<meta name="viewport" content="width=device-width">

Right? :)

Cheers!

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thank you so much idan!!! I totally got it!!! By the way, have you ever noticed that many commercial websites have all kinds of meta tags, and links in the head section.

I sure would like to take a course that teaches why a website would have so many tags in the head section. Right now the dots are not connecting for me. If you know any course that teaches from start to finish a website with lots meta tags and links in head section, please feel free to share.

Cheers!