4 ms·

Media query are at most marginally better. They still suck for all devices with high resolution and low size or large size but low resolution.

tamana 10y ago
Is that a flaw in media queries, or we devs writing bad queries?
- LoSboccacc 10y ago
  Flaw in media query. They work on resolution and on pixel density as reported by the device but you have no way to know if it's a small size high density screen or a large screen with average density. There are 13" laptops with a resolution which overlaps with the higher end mobile phones and that is where mq falls apart because you can't tell where you are. The real issue is with all browser reporting the same fixed dpi, for reason which make sense in context but don't allow to discern all cases. We work with a mix of media query + user agent sniffing to enable mobile queries only on mobile stuff. It was all fine and dandy as long as pc had >1280 pixels, tablets where between 768 and 1024 and phones below that range. Now that everything overlaps with everything, not so much, and because all browser reports metric around the 96dpi magic number, there's no solution. At least making a media query in em instead of pixel saves you from the trouble with people zooming on pages. And if your website is responsive and allows iframing, it's even worse.
  - PhasmaFelis 10y ago
    > all browser reports metric around the 96dpi magic number Why do they do that?
  - gsnedders 10y ago
    > The real issue is with all browser reporting the same fixed dpi, for reason which make sense in context but don't allow to discern all cases. I'm certainly unaware of browsers doing this, except for a few old ones on desktop and Windows Phone 8's IE, and I can't find anything claiming other browsers do this. Certainly it's never been an issue I've hit.
    - LoSboccacc 10y ago
      all browser have fixed dpi, at 96dpi precisely. it's part of the css3 standard and it's tied to the physical unit - so if you get 1cm as css width, it's the same amount of 'logical' or 'css' pixels irregardless of actual device density. (and of course if you ask 1inch to css you get 96px https://www.w3.org/TR/css3-values/#absolute-lengths https://www.w3.org/TR/css3-values/#absolute-lengths ) you can use device-pixel-ratio and the likes to have an hint on the pixel density, which doesn't protect you from the extremes (small, very high density devices and large low density screens) like the galaxy tab 7.7" has a 1280 width, which would trigger desktop line of queries if you break at 1024 like many do.
      - gsnedders 10y ago
        It's actually in 2.1 as well, the fact that 96 CSS pixels equal 1 CSS inch. But that's not what's relevant here, as we're talking about media queries where we have resolution units, and resolution units give the device pixels per some CSS unit. > you can use device-pixel-ratio and the likes to have an hint on the pixel density, which doesn't protect you from the extremes (small, very high density devices and large low density screens) > like the galaxy tab 7.7" has a 1280 width, which would trigger desktop line of queries if you break at 1024 like many do. Oh, right, so the issue here is the fact we have relatively high density screen (197 PPI) but where 1 CSS pixel still equals 1 device pixel? That seems pretty bad generally, given I presume the same is true for the rest of the OS (AFAIK in general Android browsers just follow the OS here)? It seems like to fix this we'd need to add resolution units giving number of CSS pixels per physical length unit, right?
        LoSboccacc 10y ago
        exactly, instead they went on the road of giving physical pixel per css pixel, which means we need to create all combination of kinda valid queries to support future devices (problem isn't THAT bad now, but it's getting worse) and then you have iframes, and browser zoom
        10y ago

tamana 10y ago

Is that a flaw in media queries, or we devs writing bad queries?

LoSboccacc 10y ago
Flaw in media query. They work on resolution and on pixel density as reported by the device but you have no way to know if it's a small size high density screen or a large screen with average density. There are 13" laptops with a resolution which overlaps with the higher end mobile phones and that is where mq falls apart because you can't tell where you are. The real issue is with all browser reporting the same fixed dpi, for reason which make sense in context but don't allow to discern all cases. We work with a mix of media query + user agent sniffing to enable mobile queries only on mobile stuff. It was all fine and dandy as long as pc had >1280 pixels, tablets where between 768 and 1024 and phones below that range. Now that everything overlaps with everything, not so much, and because all browser reports metric around the 96dpi magic number, there's no solution. At least making a media query in em instead of pixel saves you from the trouble with people zooming on pages. And if your website is responsive and allows iframing, it's even worse.
- PhasmaFelis 10y ago
  > all browser reports metric around the 96dpi magic number Why do they do that?
- gsnedders 10y ago
  > The real issue is with all browser reporting the same fixed dpi, for reason which make sense in context but don't allow to discern all cases. I'm certainly unaware of browsers doing this, except for a few old ones on desktop and Windows Phone 8's IE, and I can't find anything claiming other browsers do this. Certainly it's never been an issue I've hit.
  - LoSboccacc 10y ago
    all browser have fixed dpi, at 96dpi precisely. it's part of the css3 standard and it's tied to the physical unit - so if you get 1cm as css width, it's the same amount of 'logical' or 'css' pixels irregardless of actual device density. (and of course if you ask 1inch to css you get 96px https://www.w3.org/TR/css3-values/#absolute-lengths https://www.w3.org/TR/css3-values/#absolute-lengths ) you can use device-pixel-ratio and the likes to have an hint on the pixel density, which doesn't protect you from the extremes (small, very high density devices and large low density screens) like the galaxy tab 7.7" has a 1280 width, which would trigger desktop line of queries if you break at 1024 like many do.
    - gsnedders 10y ago
      It's actually in 2.1 as well, the fact that 96 CSS pixels equal 1 CSS inch. But that's not what's relevant here, as we're talking about media queries where we have resolution units, and resolution units give the device pixels per some CSS unit. > you can use device-pixel-ratio and the likes to have an hint on the pixel density, which doesn't protect you from the extremes (small, very high density devices and large low density screens) > like the galaxy tab 7.7" has a 1280 width, which would trigger desktop line of queries if you break at 1024 like many do. Oh, right, so the issue here is the fact we have relatively high density screen (197 PPI) but where 1 CSS pixel still equals 1 device pixel? That seems pretty bad generally, given I presume the same is true for the rest of the OS (AFAIK in general Android browsers just follow the OS here)? It seems like to fix this we'd need to add resolution units giving number of CSS pixels per physical length unit, right?
      - LoSboccacc 10y ago
        exactly, instead they went on the road of giving physical pixel per css pixel, which means we need to create all combination of kinda valid queries to support future devices (problem isn't THAT bad now, but it's getting worse) and then you have iframes, and browser zoom
        10y ago