Media Query works on Firefox but not on Chrome

Question

I want to add some style for the screen size between 1024px to 1280px, so I'm using following media query:

@media only screen and (min-width: 1024px) and (max-width: 1279px) {

My screen size is 1280px. The Firefox does not display any style added in the above query (and that's correct), but the Chrome browse on 1280px screen size displays the style added in the above media query.

Why Chrome on 1280px screen still displays the style added in the above media query? How can I fix the above query for Chrome too? Thanks.

Answer 1

I'm really not sure why you're experience problems with your media query. Perhaps you're not styling it properly.

Obligatory JSFiddle here

body { background: red; }  
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    body { background: blue; }
}                                                         

I've tested it with Google Chrome on three different types of screen:
1. A width of less than 1024px
2. A width between the specified 1024px and 1279px
3. A width of more than 1279px

Answer 2

That is 6 years old but maybe help someone:

I was with this same problem, media queries working fine in edge and firefox but not in chrome.

The problem, in my case at least, was that I not put the viewport tag in head/html:

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

Now why the site was working in firefox/edge I don't know, actually make it harder to find the issue...