css - 专门针对平板电脑的 Css 媒体查询

Question

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

Answer 1

您无法通过媒体查询检查设备（PC、平板电脑、手持设备），只能检查设备宽度（更多，我知道，但操作要求设备宽度）。

也许这篇文章会帮助你更多地了解它？

Answer 2

媒体查询永远不应该是特定于设备的——您只需说“对于这种大小的输出执行此操作，但对于不同大小的输出执行此操作”。无论是手机、PC、平板电脑、信息亭、手表还是其他任何东西都应该是无关紧要的。出于这个原因，媒体查询不允许您查询硬件。

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

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

Answer 3

简短的回答：你没有。

更长的答案：您以错误的方式进行操作。

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

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

1024
1366
1200
1080

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

越来越多的设备定期进入市场。

那么，你最好的选择是什么？完全放弃针对特定设备或设备类的想法。如果您必须这样做，请使用 JavaScript 来查找触摸屏（因为这是您需要专门为一类设备调整界面的最可能原因）。

您仍然可以使用媒体查询来定位宽度（或者更好的是，根据我的经验，使用比例媒体查询），但不要期望它一定能在给定的设备上工作。