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

Question

我想在设备是平板电脑（包括Apple iPad Pro（1366像素宽）和Microsoft Surface Pro 3（1440像素宽））时应用某些CSS样式，但而不是当设备是笔记本电脑时（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现在没有得到更新，但更容易上手。