css - 媒体查询所有平板电脑(包括“Pro”版本)，无笔记本电脑

当设备是平板电脑时，我想应用一些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）上的所有样式都不正确。我在媒体查询中尝试了和/或最小/最大的许多不同组合，并且在至少一台设备上渲染总是错误的。我怎么解决这个问题？

最佳答案

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

您可以尝试modernizr或device.js

它们都向您的根元素添加了类，因此为各种设备类型定义css变得很简单。 device.js现在更新不多，但是更容易上手。

关于css - 媒体查询所有平板电脑(包括“Pro”版本)，无笔记本电脑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41314814/