3 ms·

I feel like this is a more complex problem to solve than it seems at face value or the author implies, especially considering tablets of varying dpi. CSS dpi m

by donatj 6y ago

I feel like this is a more complex problem to solve than it seems at face value or the author implies, especially considering tablets of varying dpi. CSS dpi media queries are unsupported in Safari mobile and desktop, so that increases the complexity significantly. Beyond that, the fact is most web layout is still done in px or other non-fraction-of-the-width units, so it’s often a matter of the wider layout simply being broken at smaller widths, rather than just refusing the display.

simion314 6y ago
Yeah, I was trying to find a way to create a toolbar with buttons and make sure the buttons are not too small or not too big. DPI info is not present and different tricks to work around this will fail on different phone models. I wish I could ask the browser "what are the dimensions you the browser use for your buttons" so I can use same dimensions too and the user could configure this in his browsers and everything would follow it.
- jameshart 6y ago
  In theory this is what css { font: caption } should do. There are other font shorthand’s for menu text, icon labels, dialog box text, etc. that should clue you in to how a particular system UI is scaled, if browsers are doing it right. (Of course they also might not because of fingerprinting risk) Note that this is different from { font-family : system-ui } which doesn’t include size information. Caniuse sadly doesn’t have much info on font: caption support.
asiando 6y ago
There’s a good reason why there are no real DPI media queries: You should not decide how big things appear on the screen, that’s up to the user. The user has the ability to change resolution or to change the website’s zoom level, you should never access the real size and decide that a button must be exactly 1cm wide in real life on every screen for everyone. Just design for the default and then people will zoom or change resolution if the default isn’t enough.
- VPenkov 6y ago
  What about the min-resolution media query? @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 120dpi) { /* High DPI code */ }

by donatj 6y ago

simion314 6y ago

Yeah, I was trying to find a way to create a toolbar with buttons and make sure the buttons are not too small or not too big. DPI info is not present and different tricks to work around this will fail on different phone models. I wish I could ask the browser "what are the dimensions you the browser use for your buttons" so I can use same dimensions too and the user could configure this in his browsers and everything would follow it.

jameshart 6y ago
In theory this is what css { font: caption } should do. There are other font shorthand’s for menu text, icon labels, dialog box text, etc. that should clue you in to how a particular system UI is scaled, if browsers are doing it right. (Of course they also might not because of fingerprinting risk) Note that this is different from { font-family : system-ui } which doesn’t include size information. Caniuse sadly doesn’t have much info on font: caption support.

asiando 6y ago

There’s a good reason why there are no real DPI media queries: You should not decide how big things appear on the screen, that’s up to the user. The user has the ability to change resolution or to change the website’s zoom level, you should never access the real size and decide that a button must be exactly 1cm wide in real life on every screen for everyone. Just design for the default and then people will zoom or change resolution if the default isn’t enough.

VPenkov 6y ago
What about the min-resolution media query? @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 120dpi) { /* High DPI code */ }