14

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?

danijar
  • 32,406
  • 45
  • 166
  • 297
  • 2
    Check out http://bjango.com/articles/min-device-pixel-ratio/ for the pixel density approach. You'll get the idea. – kleinfreund Oct 20 '13 at 09:45
  • 1
    min-resolution and device-pixel-ratio can be used. Handling retina display: http://css-tricks.com/snippets/css/retina-display-media-query/ – Ritesh A Oct 20 '13 at 11:45

3 Answers3

9

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).

Nils Kaspersson
  • 8,816
  • 3
  • 29
  • 30
  • 2
    Okay, to precise my question, I'd like to set breakpoints based on physical size of rendered webpage area. – danijar Oct 20 '13 at 17:05
  • 1
    I'm not sure I understand the issue here. You could specify media queries in `mm`, `inches` or whatever, but they aren't [as absolute as one could wish](http://smus.com/physical-units/). You shouldn't think too much about devices, just focus on making your content (text) accessible (readable) from any kind of device. Media queries in `em` do that. :-) – Nils Kaspersson Oct 20 '13 at 17:24
  • but i build game .. little amount of text inside – pery mimon Feb 04 '19 at 13:39
  • CSS is a mess as usual ‍♂️, so there is no easy way to display life-size image of an object, IMHO it would be great UX to be able to tell user that image of an product you are looking at is exact size as in real world, so same size what you get when he makes an order. – Luckylooke May 25 '23 at 06:19
2

There does not seem to exist a reliable method for checking this today.

I have the same "need", which arises when pixels are not as important as viewing distance combined with size of screen.

For example: you can have an iPad with the same resolution as a huge television set, but you might want to present content very differently on those two devices, because the television might be located quite far away (more than the equivalent of an iPad at arms length).

There is a @media query for television sets that might help, but support for it right now is probably very sparse. My Google Chrome v32 supports it. Test yours here: http://cssmediaqueries.com/

user927887
  • 39
  • 2
1

Media queries like @media screen and (min-width: 700px) and window.innerWidth use css pixels. At first when mobile devices were really 320px, css pixels and real pixels were the same. Now new devices with 800px and the same size still report 320 css pixels.

And that is really good for designing backwards-compatible websites. Essentially @media screen and (max-width: 480px) can be translated to: Small, taking into account eyes to screen distance, and screen size (in meters not pixels).

So the css pixel acts as a reference measure more than anything else.

Real pixels, dpi, screen type and orientation can or will be available with media queries. But it could be an anti-pattern to use those.

Also don't forget viewport meta tag.

Walle Cyril
  • 3,087
  • 4
  • 23
  • 55