The DOM value "window.devicePixelRatio" and the CSS property "device-pixel-ratio" will become variable values

More than two years have passed since the start of sales of iPhone 4 in the summer of 2010, and over the past two years, site builders have become accustomed to checking the window.devicePixelRatio value with javascript (or using the device-pixel-ratio media query in CSS) as a simple and simple-minded tool that allows you to immediately find out whether the site is running on a retina display (retina display) or not. If the devicePixelRatio value is two , then we have a retinal display (the fourth iPhone, the fourth iPod Touch, the third iPad, or newer devices, or the MacBook Pro with Retina Display laptop); if the value of devicePixelRatio is equal to one (or not determined), then we have the usual definition display.



A bit more complicated, compared to Apple’s, is the accounting of devices working under Android: there you have to perceive fractional values ​​that are not equal to one or two. Peter-Paul Koch reported in the blog post “ More about devicePixelRatio ” that (according to his observations) in Nexus One, devicePixelRatio is 1.5 , while in Galaxy Nexus and Galaxy Note it is two in WebKit and 2.25 in Opera Mobile.



But these minor differences do not change the picture as a whole: everyone is accustomed to thinking about the value of the devicePixelRatio value as a property of the device that remains unchanged on the same mobile phone (or tablet or laptop). In particular, it was on this that everything was based, all the recipes from Habrahabra blogo recordings “ Adapt graphics to the Retina screen ”, “ Recognize retina-displays in javascript ”, “ Display OpenStreetMap maps on iPhone 4 taking into account the retinal display using Leaflet ”, “ How to distinguish iPad version in Safari ”,“ Optimization of graphics for Retina-screens ”,“ Complex preparation of a site for Retina ”and the like.

')

But November 2012 has come, and it is time to give up this habit, it is time to critically reconsider previous recipes. I'll tell you why.



The first bell rang when Peter-Paul Koch updated his blog post “ More about devicePixelRatio ” and wrote in a postscript that he watched firsthand: the value of devicePixelRatio in Opera Mobile browser depends on the page magnification (zoom).



The second bell rang when support for devicePixelRatio appeared in Firefox version 18 — this value was also set there as dependent on page magnification.



The third and last bell rang when W3C participants on the www-style mailing list in letters on the topic “ Behavior of device-pixel-ratio under zoom ” finally agreed (less than a week ago) that the value of devicePixelRatio is determined by the number of physical (screen ) pixels per CSS-pixel of the page - and how it was achieved (whether using a retinal display or simply pressing Ctrl- + on the keyboard) should not bother anyone.



Everything, gentlemen readers. You can forget forever that devicePixelRatio has a constant value specific to a particular device. This is not true - or rather, now it is not always true.



It is clear that this news has two sides - good and bad.



Probably, not all site builders will be pleased that previous attempts to identify a device by its devicePixelRatio value will not always be successful in the future.



Probably, not all website builders will be pleased that previously it was enough to read devicePixelRatio with a javascript at the very beginning of working with a document (on a load or ready event), and now there is an opportunity (and not even a necessity) to continue working, checking from time to time devicePixelRatio and needs adjusting the resolution of pictures to the changed page magnification, when and if the reader changes it.



On the other hand, readers will be pleased. Previously, to obtain a highly accurate version of a particular image from the Internet, it was necessary to purchase expensive Apple equipment with a retinal display capable of displaying this version. And now it’s enough to press Ctrl- + on the keyboard a couple of times - and the image will be downloaded from the site and the image will be doubled in width and doubled in height, if, of course, the author of the site did not forget to program the response to the change in the devicePixelRatio change size in the CSS request based on device-pixel -ratio .



It is hoped that in the future this particular nuance of site building will be even simpler if the February proposal for the image-set property is adopted:

selector { background: image-set(url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center; } 

Not to mention that it was implemented in WebKit in March .



It is inspiring. The future is starting to look radiant.



Notice that now, along with doubling the size of the picture, it becomes possible to triple, quadruple, and so on - as the reader is ready to twist the increase and as the site builder is ready to ensure that larger versions of the same illustration are provided.