CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Gal Ziv
Gal Ziv

Reputation: 7352

Media query not works on chrome emulator but not on actual screen

I have a weird issue.

I created a media query for screen height 768px. When I open chrome dev tools -> emulator and set the resolution to 1366 X 768 it works as expected.

When I close the dev tools I can see the media query css didn't apply.

I opened the console and checked: screen.height, screen.width, screen.availHeight and screen.availWidth.

Both heights returned 768, both width returned 1366.

What can be the issue?

The media query is as follows:

@media screen and (height: 768px)

Upvotes: 0

Views: 513

Answers (1)

peterdotjs
peterdotjs

Reputation: 1556

I think the issue is that the query you are using does't matching with the corresponding device/media you are testing.

To check whether your query applies you can check with the mediaMatch api:

Assuming you're query was something like this:

window.matchMedia("(min-width: 768)").matches

This returns a boolean. You can check what mediaMatch returns for your specific usecase.

Upvotes: 1

Related Questions