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

Posted 2023-03-12

【中文标题】所有平板电脑（包括“Pro”版本）的媒体查询，没有笔记本电脑

【英文标题】：Media query for all tablets (including "Pro" versions), no laptops

【发布时间】：2016-12-24 16:07:27

【问题描述】：

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

【问题讨论】：

css-tricks.com/snippets/css/media-queries-for-standard-devices

我最好的建议是停止设备检测并使用视口宽度。此外，您可以检测该单元是否有触摸。

【参考方案1】：

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

你可以试试modernizr或device.js

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