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
Derek Zinger
3,337 PointsDevice pixel density of 2 means 4 device pixels per logical pixel
So, if the Retina iPhone has a resolution of 640 x 1136
with a pixel density of 2
then its logical resolution is 320 x 568
Therefore, one logical pixel equals 4 device pixels, right? The logical pixel is subdivided into two vertical pixels and two horizontal pixels.
Why is "4" not the correct answer in the quiz? I'm irked that I have to rewatch 20 minutes of video for a concept that I'm pretty sure I understand.
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsI believe that for the retina display, two physical pixels on the screen equate to 1 css pixel. I don't think you should think about both horizontal and vertical direction together. Rather, two physical pixels in the horizontal direction equal 1 css pixel in the horizontal. Same for vertical.
Derek Zinger
3,337 PointsThanks for replying, Jason. That was indeed the question.
You're right in that Treehouse has been referring to 2 Retina pixels per every CSS pixel. However, I came into this already understanding Retina pixels in the 2D way (ie. 4:1). I get why they're asking for an answer of 2, but you have to admit that 4 is also a perfectly correct answer, is it not?
Jason Anello
Courses Plus Student 94,610 PointsHi Derek,
I could not find any source that referred to it as 4 to 1. Do you remember where you got that idea from? I can see why you're getting 4:1. There's 4 times as many pixels if you multiply the width and height to get total number of pixels. But resolution is measured linearly. I tried to find a source that definitively says this but was unable too. Many sources though said the ratio was 2 for something like the retina display.
So it's not just Treehouse that is referring to it this way.
Here's a link that has some info on the different units and how they all fit together.
http://www.broken-links.com/2012/07/13/using-media-queries-to-test-device-resolution/
One thing to note is that it mentions that 96dpi is equivalent to a device pixel ratio of 1. 96dpi is dots per inch which is a linear measurement. So device pixel ratio is also a linear measurement.
As you'll find in the article, device-pixel-ratio isn't in the standard. We should move towards using resolution instead. The w3c created a new unit called dppx which is dots per pixel unit. This is meant to replace device-pixel-ratio. A device-pixel-ratio of 2 is equivalent to 2dppx.
I hope this clears it up for you a little better.
Derek Zinger
3,337 PointsThanks for the detailed reply, Jason. I can also understand it as a 1:2 ratio. It was Apple's original publicity for the Retina display that had me thinking on two axes, though. They showed a pixel being subdivided into four.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsWas this the question?
If a device has a pixel-ratio of 2, then 1 CSS pixel is displayed as ___________ physical pixel(s) on screen.
If it is then I think it would help if you consider horizontal and vertical separate, not together.