媒体查询不适用于 chrome 模拟器，但不适用于实际屏幕答案

【问题标题】：Media query not works on chrome emulator but not on actual screen媒体查询不适用于 chrome 模拟器，但不适用于实际屏幕
【发布时间】：2017-01-27 18:17:26
【问题描述】：

我有一个奇怪的问题。

我为屏幕高度 768 像素创建了一个媒体查询。当我打开 chrome dev tools -> emulator 并将分辨率设置为 1366 X 768 时，它按预期工作。

当我关闭开发工具时，我可以看到媒体查询 css 不适用。

我打开控制台检查了：screen.height、screen.width、screen.availHeight 和 screen.availWidth。

两个高度都返回 768，两个宽度都返回 1366。

可能是什么问题？

媒体查询如下：

@media screen and (height: 768px)

【问题讨论】：

【解决方案1】：

我认为问题在于您使用的查询与您正在测试的相应设备/媒体不匹配。

要检查您的查询是否适用，您可以使用mediaMatch api 进行检查：

假设你的查询是这样的：

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

这会返回一个boolean。您可以查看 mediaMatch 针对您的特定用例返回的内容。

【讨论】：

您的查询是针对宽度的，我需要高度 768。无论如何这是我运行的查询：window.matchMedia("(min-height: 768)").matches; window.matchMedia("(高度: 768)").matches;两者都返回错误。这是为什么呢？
使用你提到的函数我注意到当我使用 (max-height: 768px) 返回 true 而 (height: 768px) 返回 false。怎么会考虑 screen.availHeight\height 返回 768？当然也谢谢你的回答
@GalZiv 您应该使用window.innerWidrth 来获取视口的实际宽度。当您使用screen 时，您指的是实际监视器大小，而不是浏览器/视口大小。您列出的查询运行正常。