How can max-width CSS media query accommodate zoom?

Up vote 1 down vote favorite 1 share g+ share fb share tw.

I'm using a CSS Media Query to adjust the look of my page if it is very narrow. In my simplified example, if the page is less than 300px wide, I'll make the background blue. @media all and (max-width: 300px) { body{ background-color:blue;} } I recently discovered that if the user zooms (Ctrl+Scrollwheel or on Chrome Wrench>Zoom) that the max-width will still kick in at 300 actual pixels, not 300 zoomed pixels.

This can break sites with more sophisticated layouts. Is there any way for the max-width media query to handle users with zoomed browsers? Html css html5 css3 zoom link|improve this question asked Nov 11 '11 at 19:48Newtang898415 95% accept rate.

1 Browsers should implement this (like firefox already does). I don't think there is any way of doing this yourself, except using JS. Just use flexible layouts.

Some thinks would become a bit more cramped than you'd like, but as long as the site is still usable... – Gerben Nov 11 '11 at 20:00 2 After a little experimentation: using "max-width:10em" works when you zoom. HOWEVER this does not work in chrome. Firefox works fine (haven't tested in other browsers) but chrome seams to bug out.

Ill see if I can figure out what to do about chrome. – ntkachov Dec 16 '11 at 10:24.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.