Mike Mike - 8 months ago 49
CSS Question

Media query works on mobile Firefox but doesn't work on mobile Chrome

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?

Answer

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.