CSS Media Query - 更仔细地定位平板电脑

Question

我一直在使用媒体查询来定位平板电脑，只需写下来：

@media only screen and (max-width: 1199px) { ... }

然而，我本周末遇到了一款平板电脑，其分辨率甚至超过了平板电脑，触发了一个不应该看到的菜单。通常情况下，我不在乎，因为我使用这些查询来触发通常在该分辨率下看起来很好的设计更改，但在这种特殊情况下，由于基于悬停的菜单显示出来，因此它并不好显然很难在平板电脑上使用。

所以我一直在修补一下在最大宽度或两个方向上触发的媒体查询，如下所示：

@media handheld, (max-device-width: 1300px), (orientation: landscape), (orientation: portrait)  { ... }

然而，这似乎也会在我的电脑上触发，我不明白为什么。任何人都知道为什么，或者有更好的解决方案来解决我的问题？

Answer 1

这是因为您在媒体查询条件中使用的是distinct = {'count': 0}而不是,。

例如：

and

试试这个。