During my media query test I found out that
min-resolution: 0[unit] does not work in any browser for any unit. I find this weird.
Here is a quick test case for the
dpcm units. The media queries tested are the following:
@media (min-resolution: 0dpi) and (max-resolution: 200dpi) @media (min-resolution: 0.1dpi) and (max-resolution: 200dpi) @media (min-resolution: 0dpcm) and (max-resolution: 200dpcm) @media (min-resolution: 0.1dpcm) and (max-resolution: 200dpcm)
The ones with
0 should be applied to the test page, since the resolution is larger than 0. Yet they aren’t. Changing the value to 0.1 solves the issue, but seems like a hack.
I do not understand what’s going on. True, an actual resolution of 0dpi or 0dpcm will only occur if there is in fact no screen. Still, the same goes for, for instance,
min-device-width: 0cm, which works fine in all browsers.
This isn’t a simple browser bug: Firefox, Opera, and IE10 all agree that the media queries with 0 should not be applied. (The WebKit-based browsers do not support
resolution at all.)
So apparently the 0 value is not allowed. I checked the CSS3 media queries spec and the CSS4 media queries spec, and neither give a whisper of a hint of 0 being a forbidden value. So I wonder why the browsers did this; having 0 around for comparisons seems useful.
I don’t know what’s going on, but it’s weird. And you have to make sure you don’t use
min-resolution: 0[unit]. So don’t.
Upcoming speaking gigs:
Comments are closed.