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

Question

我有一个奇怪的问题。

我为屏幕高度768px创建了一个媒体查询。当我打开chrome dev工具时 - ＆gt;模拟器并将分辨率设置为1366 X 768它按预期工作。

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

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

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

可能是什么问题？

媒体查询如下：

@media screen and (height: 768px)

Answer 1

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

要查看您的查询是否适用，您可以查看mediaMatch api：

假设您的查询是这样的：

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

这会返回boolean。您可以查看特定用例的mediaMatch返回值。