What is the device pixel ratio used for?

Question

As far as I know, this is the ratio between the "abstract" resolution and the physical resolution of the device. Therefore, I am testing it (on HTC Desire), the physical resolution is 480x800 , it came out of the ratio of 1.5 . I sketched some elements, but it still requires exactly 480px width to fill the viewport, where is my naive idea of ​​the need for "320 pixels"?

Answer 1

From http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html , where the author discusses the differences in devicePixelRatio on mobile devices:

On iOS Retina devices, the screen.width screen gives the width in dips. Thus, both the retina and non-retina iPad report 768 in portrait mode. On three Android devices, screen.width gives the width in physical pixels; 480, 720 and 800, respectively. All browsers on devices use the same values. (Imagine that some browsers on one device used dips and other physical pixels!)

This leads the author to the following conclusion:

• On iOS devices, multiply devicePixelRatio by screen.width to get the number of physical pixels.
• On Android and Windows Phone devices, divide screen.width by devicePixelRatio to get the number of failures.

In your case, the width of the screen matters, simple and simple. DIP calculation is what the device should take care of, not as a developer. If the device wants to compensate for a different pixel ratio, it will serve as your DIP width and give you a ratio. If he believes that the pages should be displayed with a resolution of an unmodified pixel, he will serve you exactly this width. The author of the message also comes to the following conclusion, which is of interest to me:

Apple added pixels because it wanted to make the display clearer and smoother, while Android manufacturers added pixels to draw more material onto the screen.

In any case, use the width that the browser gives you and leave it on the device to compensate.