Device pixel ratio – Mobile Web Development

October 8, 2019 0 By Peter Engel


Now, if you’re a pretty observant gadget hound like me, you may be wondering how is it that these bucket breakdowns actually work. My Nexus 7 tablet, for example, is only 800 pixels wide in the portrait orientation. This Galaxy x4 phone is actually 1080 pixels wide, in the same dimension. Even though the S4 has more pixels, it’s somehow turning up as a phone. Why is this? The answer lies in a little bit of magic called the device pixel ratio, and the fact that once again, the web platform is lying to you. The device pixel ratio, is the ratio between device independent pixels and an actual physical pixel on the screen. Remember, back in the viewport lesson, when I said you should just give this magic boilerplate at the top of your file, and you’d get the actual number of pixels on the screen as your width? Well, that’s not actually quite true, because we’ve a concept called a device independent pixel. The first time this really came into play, was when apple released the iphone 4. The original iphone and the iphone 3G and 3Gs, had a screen resolution of 320 by 480. The iphone 4, however, had what apple called a retina display, which doubled the horizontal and vertical resolution. To 640 by 960, but they still wanted text set in pixels to be the same height. To go back to the viewport lesson for a second, even with width set to device width, they still wanted to have the same pixel width fed to the layout algorithm, so you got consistent layout across the iphone 3 and iphone 4. In essence, they caused the lay out algorithm to lie again. Even though the screen is 640 x 960, the layout algorithm treats it like it’s 320 x 480. That way, sizes that formatted for the original 320 x 480 screen still layout well on the higher resolution screen, and text and images are rendered at the higher resolution. So, it can look better as well. That’s why, even on the iphone 5, if you set a view port with device width, the browser width is returned to you as 320 pixels not the actual 640 pixels that there’re across the screen. There’re are 2 device pixels for every pixel that the system lays out. The new screen, of course, is a little bit longer. So, the vertical dimension is different. Window.device pixel ratio captures this ratio. The number of device pixels, for every formatting pixel in the layout system. It’s basically a way to identify the density of pixels on the screen. Now, this may not be the precise device pixel density. It’s sometimes rounded to the nearest integer. But, this let’s us know high resolution density the screen is, rather than just how many layout pixels there are on it. So, let’s go back to the original question. How is it that the Galaxy S4 is getting the phone layout in our conference app, while my Nexus 7 is getting the tablet layout? Even though the S4 has couple hundred more pixels across, than the Nexus and we’re using pixel count to switch in our media query. Well, the answer is device pixel ratio. The Galaxy S4 has a device pixel ratio of 3. The Nexus 7 is only 1.3. So, if you look at the formatting width, the width passed into the viewport, the windows screen width. Well, on the S4 it’s 360. But on the Nexus 7, it’s 601.