Is there a workaround to use physical screen width in CSS media queries? Today, there are phones which exceed the resolution of desktop monitors. However, phones should still display the mobile layout and desktops the standard layout.
So I can't rely on pixel based queries like the example below. Instead, I need either a physical measurement, or one about the pixel density.
@media screen and (min-width: 700px) {
}
Since I haven't found such measurements through my research, they might not exist. Anyway, how is this problem approached typically?
Well, for starters, the CSS pixel is an angular measurement and is decently normalized between devices. Not entirely, but enough so for this to be a non-issue in most cases.
Personally I measure media queries in ems so that they're relative to my font size. I mean, people usually visit a web site to read the text found on the website, so as long as there's a reasonable amount of words per line I'm satisfied.
You really shouldn't measure with physical (device) widths because people may have UI elements taking up space (or simply not run their browsers in full screen).