-
Notifications
You must be signed in to change notification settings - Fork 682
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-env] Device Pixel Ratio #5986
Comments
d-p-r, as the term is currently used, is not about the ratio of px to physical sizes, but rather the ratio of CSS px to device pixels. As I just laid out in a new FAQ entry, having user agents provide real-world lengths is a failed experiment that we're not interested in trying again. As a side note, pixels are always square enough on the web that lengths are identical in both dimensions; a 100px by 100px square is always square. |
The Workaround section in that FAQ entry uses a custom Authors, who believe they could increase reliability with calibration done by their users, could still do it, but with better fallback: The separate horizontal and vertical values are less important, perhaps unnecessary indeed. |
As I explain in the FAQ, getting accurate values for this out of arbitrary display devices is, as far as I know, a failed experiment. This is one of those cases where worse is better - giving authors a way to sometimes get a value that is correct (but othertimes is still slightly or extremely wrong) is worse than just telling them to calibrate when they need accurate answers, because it suggests that the scale value is something worthwhile when actually it's sole use is as a hopefully better fallback value than |
For arbitrary display devices, this may well be a failed experiment. However, for mobile devices that integrate a touchscreen, i.e. phones, watches and tablets, the system usually knows such physical dimensions and may expose them to native apps, e.g. rulers. I believe that PWAs should be able to do something equivalent, and not just in JS. |
JFTR, |
As a result of #614, please add environment variables:
env(device-pixel-ratio)
env(device-pixel-ratio-x)
env(device-pixel-ratio-y)
This is a
<number>
constant, which can be used verbatim as a multiplier or divisor with a<length>
, e.g.calc(1mm * env(device-pixel-ratio, 1))
, to get from nominal, CSS millimeters to actual, SI millimeters etc.On media and devices where
px
depends on physical units and not the other way around (as on screens), this should always be set to1.0
. Elsewhere, it should not deviate a lot from this.I included horizontal and vertical variants, because not all pixels are square.
The text was updated successfully, but these errors were encountered: