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:

@media screen and (max-width:320px){
#sfWrapper{max-width:280px;font-size:0.625em;line-height:1.2em}
#cpw_banner{display:none;visibility:hidden;}
#cpw_content{width:100%;}#cpw_aside{width:100%;}
}

And Firefox (when resizing the browser, doesn't seem to notice the max:width 320px while it reacts to the bigger screen media queries.

Not only that, but when I use ctrl + often enough on a window it will kick in, where as Chrome and Internet Explorer 9 don't apply new media queries on ctrl + / ctrl -

---

Anyone know what's the 'standard' behavior with regards to ctrl+/ctrl- and media queries?

Thanks in advance... J.

Answer 1

I dont know why the answer provided has been ticked as it doesn't answer the OP's question. The reason why the media query doesn't fire 320 pixels is because of the navigation toolbar in Firefox.

If you turn it off (go to VIEW - TOOLBARS - NAVIGATION TOOLBAR and untick it) then the media query will fire at 320 pixels.

Answer 2

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.