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
Robert Waddington
8,309 PointsLooking on an iPhone...
Does the website not look right to anyone else? I thought I'd check it out after this video but it looks really strange. Font sizes small and pictures not quite right.
Robert Waddington
8,309 PointsI just got to the part where we started working on the desktop side of things and I figured that I would check it out on mobile. What you are saying makes sense though, my iPhone could be trying to display the desktop version, I'll try out your suggestion and come back with results. Thanks!
EDIT: With just that one line of code on each page everything looks much better and seems to function all the same. Thank you!
Blaize Pennington
13,879 PointsJustin, this code works perfectly... any way you can walk me through exactly what is happening here?
2 Answers
Justin Hunter
Courses Plus Student 11,484 PointsBlaize Pennington, sure! Apple has been notoriously proud of their original innovation - being able to display normal websites on a phone. They clung to that so much that they didn't even mobily optimize their site until this recent release of iPhone 6. However, the way the iphone displays naturally doesn't quite fit with the responsive design movement, so this code allows it to display as if the viewport was shrinking - like when you resize your browser.
The code is saying the width of the browser or viewport should be set to the device width. The initial scale feature says that it should not be zoomed in or out, but that the user can pinch and zoom still. Alternatively you can use user-scalable=no to prevent pinch zooming. I don't like to do this because there might be a time that I can't think of up front where a user must zoom.
I hope that helps!
Blaize Pennington
13,879 Points<meta name="viewport" content="width=device-width, initial-scale=1.0">
So name="viewport" is just a way to name your meta field?
Content="width=device-width" is saying set the width to the device's width?
And initial-scale="1.0" is a multiplier I'm assuming. So if I wanted to start zoomed in I could do 1.5 or if I wanted to zoom out I could do 0.5?
Justin Hunter
Courses Plus Student 11,484 PointsSort of. The name="viewport" is assigning a name to the nets tag, but that name is not arbitrary. It is specifically saying that you are scaling based on viewport size.
As for the initial scale, you've got it. That is a way of overriding the default settings of some mobile browsers. Some will auto scale to zoom in or zoom out. So you can override that with initial scale.
Justin Hunter
Courses Plus Student 11,484 PointsJustin Hunter
Courses Plus Student 11,484 PointsHey Robert, I'm not sure what part of the project you're at, but I remember having to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">to the head section on each page. I seem to remember that not being included in the project, but it's necessary to prevent iPhones from displaying the site in desktop mode and to allow it to respond properly.