Firefox, Windows DPI scaling and CSS max-width media query - css

Question

I have a website where a media query decides whether to show the right-hand column, depending on browser width. CSS looks like this:
#media only screen and (max-width: 1152px) {
#column_right {display:none}
}
Recently, I was testing this on a Windows box where the DPI scaling is set to 125%. The resolution of the monitor is set to 1024x768. So in theory, because there are only 1024 CSS pixels available, I assume this would match the media query.
However, this is not the behavior that occurs! It seems that the media query looks not at the CSS pixels, but at device pixels, of which there are 1280 (1024 x 125%). This occurs only in Firefox so far, because Firefox uses the device pixel ratio set by Windows, while all the other browsers (including, bizarrely, Internet Explorer) use a default device pixel ratio of 1.0. I say that this is bizarre of IE because if there is one browser that should respect Windows settings, it is IE.
Anyway, why is it this way, and how would I work around it?

Answer 1

You could use max-device-width to hide the column if the screen resolution is below a certain width.
This example below would trigger the display: none media query if the screen resolution is up to 1024px wide. Above 1024px gets a green div.
div {
background: #F00;
width: 100px;
height: 100px;
}
#media screen and (max-device-width: 1024px) {
div {
display: none;
}
}
#media screen and (min-device-width: 1024px) {
div {
background: green;
}
}
<div></div>