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
Ted Smith
9,851 PointsWebsite not rendering properly on iphone
I recently completed the "How to Make a Website" course. I successfully uploaded the site to the web, and it renders properly on a laptop (it is responsive and elements shift position depending on browser width).
However, when I view the site from an iphone, I see the desktop rendering (3 photos wide, nav shifted to the right of the screen), rather than the slimmer version we built for mobile (2 photos wide, nav positioned underneath the title).
Any ideas on why this is happening?
9 Answers
Chris Dziewa
17,781 PointsIt is probably because the newest iphones have a pixel density ratio of 2 instead of one. You will have to do a separate media query for this:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
/* css to target */
}
Ted Smith
9,851 PointsGreat! I used "(-webkit-MAX-device-pixel-ratio: 1)" to prevent CSS changes being applied to screens w/ the density ratio of 2.
Thanks again!!!
Chris Dziewa
17,781 Points@brettsmith I would probably leave that project the way it is for the standard media queries and then at the bottom put your retina display media query. For this you will want to target the device pixel ratio as well as a maximum screen size in the same media query. Apparently the media query on devices is based on the smallest length of the dimensions. In the case of an iPhone retina display, this should be 320px (target the portrait width). Inside, you can put your device specific changes to the layout and other elements.
Example for retina display iphone:
@media only screen and (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone Retina display specific styles */
}
You can also target the orientation of the device by adding and (orientation: landscape) or and (orientation: portrait)
Hopefully this helps. There is a lot of information available on various sites for more information about device specific media queries. Just keep in mind that css cascades so the last media query on the stylesheet can affect the media queries above it.
Ted Smith
9,851 PointsI added the pixel ratio media query to each of the existing queries as an "AND" condition:
@media screen and (min-width: 480px) and (-webkit-max-device-pixel-ratio: 1) {
Chris Dziewa
17,781 PointsSorry Ted, that was intended to be a comment for Brett!
Travis Birch
3,602 PointsAn easy solution is to put this code in the head of the document.
<meta id="view" name="viewport" content="width=device-width, initial-scale=1.0"/>
It sets the pixel ratio to a scale of 1-1. That way your media queries that you set in the course will work they way they were meant to.
Chris Dziewa
17,781 PointsThis only sets the scale to 1 so that things don't look like a zoomed out version of the full site, though this would not work for retina display devices as they act as if they were twice the size of their physical dimensions.
Chris Dziewa
17,781 PointsGood! glad it worked for you!
Brett Smith
4,191 PointsI just finished that course too, and had the same issue. Could you go into more depth on where to add the pixel ratio media query? How do I convert what I have from that course to work this way? Right now I went back and adjusted the original code so that it looks ok on my iPhone5 and was trying to use media queries to make it look different for larger scenes(iPad and computer). What has happened is that I had to set my first media query to 981px so it won't change on my iPhone, but this is so large that on my iPad I still get the iPhone optimized version.
Brett Smith
4,191 PointsThanks for the quick response guys!! I really appreciate it! I'll go back through and set everything back to its original value, implement this and let you know how it goes!
Travis Birch
3,602 Points<meta id="view" name="viewport" content="width=device-width, initial-scale=1.0"/>