媒体查询不适用于chrome仿真器，但不适用于实际屏幕

Question

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)

Answer 1

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.