css - 所有平板电脑(包括 "Pro"版本)的媒体查询，没有笔记本电脑

Question

当设备是平板电脑时，我想应用一些 CSS 样式，包括 Apple iPad Pro(1366 像素宽度)和 Microsoft Surface Pro 3(1440 像素宽度)，但当设备是笔记本电脑(1024 像素减去滚动条或更大)时，我不想应用这些样式。当我使用这段代码时:

@media (min-width: 768px) and (max-width: 991px) and (max-width: 1440px) {
    /*
        non-smartphone touchscreen optimized styles here
        large buttons, menus with everything visible without :hover etc.
    */
}

大型平板电脑 (992px-1440px) 上的所有样式都不正确。我在媒体查询中尝试了许多不同的和/或最小/最大组合，并且至少在一台设备上呈现总是错误的。我该如何解决这个问题？

Answer 1

鉴于平板电脑的分辨率与许多非触摸设备重叠，仅取决于分辨率是行不通的。您将需要依赖用户代理字符串或依赖特征检测。

你可以试试modernizr或 device.js

它们都将类添加到您的根元素，以便为各种设备类型定义 css 变得微不足道。 device.js 现在更新不多，但更容易上手。