Search code examples
browserdpi

What browser's high-dpi and low-dpi definitions exactly are?


In the MDN documentation in the "Absolute length units" there are a high-dpi and a low-dpi definitions.

These definitions are used to describe how is 1 pixel treated for different screens. But when exactly high-dpi starts and ends? The same question for low-dpi.

In the case when these definitions are browser-related, could you share a link to read about it - for example the definition for chrome or for safari or for whatever you have?

Any useful information is appreciated!

Thank you in advance!


Solution

  • https://www.w3.org/Style/Examples/007/units.en.html

    In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.

    CSS doesn't define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.