Mike Mike - 28 days ago 9
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.

Comments