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 Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

3 Answers

Before the invention of tablets and different sized digital devices, webpages were generally static (fixed in size).

However, with an explosion in the variety of devices with a range of different sizes, developers had to rethink a strategy to cope with the demands of displaying the webpages online to all the users, from small sized screen devices to large.

The viewport is one of the elements use on the HTML document placed in the head, which provieds responsiveness to the website being viewed, by allowing the device that is viewing the webpage to scale to view at 100%, so fitting the contents of the page onto the screen. That is why we include initial-scale = 1.0, like this:

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

Here are some links with additional help about the meta tag:

https://www.w3schools.com/css/css_rwd_viewport.asp

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