Media query works on mobile Firefox but doesn'

问题:

I'm facing the problem with media queries on mobile devices. I've got something like this:

@media screen and (min-device-width : 320px) and (max-device-width : 480px){
/* Some styles*/
}

I'm testing my website on Galaxy S6. In Firefox everything looks fine and styles do change but when i load the same website in Chrome - there's no change and it looks like the media query doesn't work. Does Chrome need some special queries?

回答1:

Add this meta tag into the header of your HTML file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This should solve your problem. Otherwise the browser might not resize because it will not accept that the screen size is meeting your media query criteria.

回答2:

I had this issue as well and I thought it was related to @media queries nesting (that only Firefox currently implements). Since it was a foreign huge CSS file I was dealing with, I wasted a lot of time separating each and every rule into more restrictive queries (ranges with min, max, pixel-ratio and resolution)...

Later I found that after this line:

<meta name="viewport" content="width=device-width,initial-scale=1">

In another template there was another line with:

<meta name="viewport" content="width=639, initial-scale=0.5, maximum-scale=1.0, user-scalable=no">

This was overriding the first rule and, with the exception of Firefox (mobile), it actually created a couple of problems:

• all the media queries that had max-width under 639px were being ignored in Chrome (or the default Android browser);
• queries with max-device-width syntax were also being ignored (only max-width ones worked).

So my suggestion is, before you head on checking all the problems in the CSS, have a look first at all the meta tags that may be affecting the viewport.