专门针对平板电脑的 Css 媒体查询答案

【问题标题】：Css Media Queries specifically for tablets专门针对平板电脑的 Css 媒体查询
【发布时间】：2013-02-21 08:27:06
【问题描述】：

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

【问题讨论】：

标签： css media-queries

【解决方案1】：

简短的回答：你不知道。

更长的答案：你走错路了。

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

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

1024
1366
1200
1080

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

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

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

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

【讨论】：

部分正确。物理分辨率与报告的分辨率无关。在 CSS 中，iPhone 仍然有 320px 的宽度。要扩展 Shauna 的答案，请阅读文章：Responsive web design default breakpoints are dead
@bfred.it - 然后您还会遇到 CSS 像素与设备像素不同的问题。坦率地说，在您摆脱对设备的依赖之前，这都是一个巨大的集群。
好文章，关于比例媒体查询的文章。 RWD 工作量太大，因为有时我们希望网站的某些部分具有最小宽度，无论使用什么设备。但像素因设备而异。不过还是谢谢。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

您无法使用媒体查询检查设备（PC、平板电脑、手持设备），只能检查设备宽度（我知道，但请询问设备宽度）。 p>

也许this article 会帮助你了解更多？

【讨论】：