Is Firefox 6/7 handling max-width:320px media query wrong?

Question

I\'m seeing strange behavior with media query in Firefox lately, and I was wondering who\'s doing it right (compared to Chrome and IE9).

I\'ve got the following css:

Answer 1

In Firefox, depending on your exact toolbar setup, it may be impossible for the content area to shrink below a certain width. If you set up a page with a vertical scrollbar, you can see the scrollbar start disappearing when the window gets to be smaller than that minimal width. At that point, the browser window is getting smaller, but the page viewport is NOT. So if that minimal width is greater than 320px in your case, then the media query above would never apply.

The key point being that media queries match on the page viewport width, not the browser window width.

Furthermore, media queries match on CSS pixels, not device pixels. Zooming in Firefox changes the size of a CSS pixel in device pixels, so the page viewport size (which is fixed in device pixels) changes in CSS pixels.

There is no standard of what zoom should do.