所有平板电脑（包括“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 现在更新不多，但更容易上手。