[css-media-queries] css media query width and window.innerWidth may not be equal

[mjf-g]

According to the CSS specifications, both of them are the width of the viewport: [1], [2]. So they should be equal. But the window.innerWidth is a signed integer while media queries can specify float precision: [1], [3].

So they may not be equal, for example:
Web page zoom level: 300%;
Physical pixel width: 1000px;
"window.matchMedia('(width: ' + window.innerWidth + 'px)').matches" will be set to false.

References:

1. https://www.w3.org/TR/css3-mediaqueries/#width
2. https://drafts.csswg.org/cssom-view/#dom-window-innerwidth
3. https://drafts.csswg.org/cssom-view/#ref-for-dom-window-innerwidth

[frivoal]

I suppose we could specify that media queries round up the the closest integer pixel value before doing the comparison, but while this would solve this particular problem, this would cause the opposite problems when using inequalities:

So they may not be equal, for example:
Web page zoom level: 300%;
Physical pixel width: 1000px;
"window.matchMedia('(width > 333px)').matches" would return false, even though it is actually true.

Hopefully we can fix this problem on the cssom side, but even if we cannot, given that width mediaqueries are more useful for inequalities than for equalities, I'm inclined to keep the behavior of mediaqueries unchanged.

[css-meeting-bot]

The CSS Working Group just discussed css media query width and window.innerWidth may not be equal, and agreed to the following:

• RESOLVED: No change to @media width/height

The full IRC log of that discussion

<heycam> Topic: css media query width and window.innerWidth may not be equal
<heycam> github: https://github.com//issues/4713
<heycam> florian: MQs lets you test the width (and height)
<heycam> ... of a page, and the MQ works in terms of floating point numbers
<heycam> ... there is also window.innerWidth, which relates to the same dimension, but it's an integer
<heycam> ... the fact that they're different is weird
<heycam> ... if you test the MQ against a value against the window.innerWidth you may get surprising results
<heycam> ... a strict equality MQ could fail
<heycam> ... in practice min-/max- is better. but this is odd, not sure what to do about that
<heycam> Rossen_: this is when you use window.matchMedia() with a value from window.innerWidth?
<Rossen_> "window.matchMedia('(width > window.InnerWidth)') << this is a problem
<heycam> dbaron: I think one thing that could be done is to propose an API that is better than window.innerWidth, and returns the float values
<heycam> Rossen_: I guess the questions that is MQ-scoped, is there anything we should be looking at doing for the MQ width or not?
<dbaron> (I think that's a thing that could be done by anyone who thinks this is an issue for them!)
<heycam> florian: I would like to not change it. but given I don't know how/whether to solve it...
<heycam> ... so would rather go in dbaron's direction
<heycam> ... rather than change MQs to work on integers
<heycam> Rossen_: the usage of @media width is very high
<heycam> ... making a change would be very disruptive, don't think we have that option
<heycam> Rossen_: any objections to not change @media width/height?
<heycam> RESOLVED: No change to @media width/height
<Rossen_> Zakim, end meeting
<Zakim> As of this point the attendees have been Rossen_, plinss, fantasai, stantonm, dbaron, faceless2_, GameMaker, jensimmons, heycam, miriam, chris, chrishtr, dino, drousso, leaverou,