Css Media查询专门针对平板电脑

Question

我有一个媒体查询 - ＆gt; @media all AND（max-width：1024）..它在三星平板电脑上运行良好，但我需要这只适用于平板电脑，而不是在电脑上。如果设备是个人电脑，它应该只有@media屏幕和（最大宽度：768px）..我该怎么办呢？

Answer 1

您无法检查具有媒体查询的设备（个人电脑，平板电脑，掌上电脑），仅针对设备宽度（更多，我知道，但请求设备宽度）。

也许this article会帮助您了解更多信息？

Answer 2

媒体查询绝不应该是特定于设备的 - 您只需说'对于此大小的输出执行此操作，但对于不同大小的输出，请执行此操作'。无论是手机，PC，平板电脑，自助服务终端，手表还是其他任何东西都应该无关紧要。因此，媒体查询无法使您查询硬件。

您可能需要基于设备功能的不同行为（而不是样式），例如..这是一个“触摸”设备吗？但是应该用JS而不是CSS来管理。

您的查询的实际目标是什么？将CSS应用于PC和平板电脑是否重要？

Answer 3

简短的回答：你没有。

答案越长：你的方式就错了。

很容易陷入使用屏幕宽度来定位特定设备的陷阱，但那是一个爱丽丝梦游仙境兔子洞。为什么？因为移动设备的宽度与桌面的宽度重叠。

例如，这里有一个屏幕宽度列表，你能猜出哪些是桌面？

1024
1366
1200
1080

猜猜是什么？我敢打赌你猜错了。 1024及以上似乎是“桌面”分辨率，但iPhone 5 Retina是1136x640，第三代iPad是2048x1536。为了使事情变得更加复杂，桌面上的许多人不会保持他们的浏览器最大化，因此设备宽度不等于浏览器宽度。在Kindle上会发生什么，它具有更高的分辨率，但也会增加文本大小？

更多设备定期上市。

所以，你最好的选择？放弃完全针对特定设备或设备类的想法。如果你绝对必须使用JavaScript来寻找触摸屏（因为这是你需要专门为一类设备调整界面的原因）。

您仍然可以使用媒体查询来定位宽度（或者更好，根据我的经验，use proportional media queries），但不要指望它必然适用于给定的设备。