所有平板电脑（包括“专业版”）的媒体查询，没有笔记本电脑

Question

我希望在设备是平板电脑时应用一些CSS样式，包括Apple iPad Pro（1366px宽度）和Microsoft Surface Pro 3（1440px宽度），但不适用于设备是笔记本电脑（1024px减去滚动条或更大）。当我使用这段代码时：

@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现在没有太多更新，但更容易上手。