如何检测浏览器是否支持CSS Grid-css教程-PHP中文网

最轻量可靠的 Grid 检测方式是 @supports (display: grid)，但需配合 @supports (display: grid) and (grid-template-columns: 1fr) 排除 Safari 10.1 等半支持环境，IE 完全忽略 @supports，JS 检测应结合 style 支持性与计算样式验证。

如何检测浏览器是否支持css grid

@supports (display: grid) 是最轻量可靠的检测方式

直接用 @supports (display: grid) 就行，不用查 UA、不用跑 JS 特性检测——它由浏览器原生解析，比 'grid' in document.documentElement.style 更准，也比 UA 字符串匹配更稳定。

常见错误是写成 @supports display: grid（缺括号）或 @supports (grid: 1fr / 1fr)（grid 不是可检测属性）。必须带完整声明：属性名 + 冒号 + 合法值，且值不能是简写语法（如 grid 属性本身不可测）。

@supports (display: grid) ✅ 正确，空格和冒号不能少
@supports (display: -ms-grid) ❌ IE11 虽支持该语法，但 @supports 在 IE 中被完全忽略，这条规则根本不会执行
别依赖 getComputedStyle(el).display === 'grid' —— IE11 返回空字符串，Safari 10.1 可能返回 grid 但后续 gap 失效，检测失真

只测 display: grid 会漏掉“半支持”浏览器

Safari 10.1、iOS Safari 15.6、Android WebView ≤76 这些环境能解析 display: grid，但对 gap、fr 单位或 grid-template-areas 支持不全，布局照样错乱。单靠 @supports (display: grid) 会让它们误入 Grid 分支。

推荐组合检测：@supports (display: grid) and (grid-template-columns: 1fr)。这个组合能筛掉绝大多数 WebKit 旧版本，因为 1fr 在 Safari 10.1 之前不被识别，而 grid-template-columns 是现代 Grid 的核心声明，比 gap 或 grid-area 更早被广泛实现且兼容断层明显。

加 and (row-gap: 0) 更严，但部分安卓 WebView 对 row-gap 解析异常，反而导致整块规则被跳过
避免 and (gap: 0) —— Safari ≤14.1 和旧 WebView 根本不认 gap，检测直接失败
IE10/11 完全无视 @supports，所以降级样式必须写在 @supports 块外部，且语法必须是它能理解的（比如用 float，不用 gap）

JS 检测仅用于兜底或动态逻辑

当你要在 JS 里做条件加载、上报兼容率、或切换 data 属性控制整体布局时，才需要 JS 检测。此时别只查 style.grid，要结合计算样式验证实际生效性。

简单可靠写法：

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

const supportsGrid = 'grid' in document.documentElement.style &&
  getComputedStyle(document.documentElement).display !== 'none';

注意点：

document.documentElement.style.grid 在 IE11 返回 undefined，但 'grid' in ... 返回 false，所以第一项足够过滤 IE
getComputedStyle(...).display 在 Safari 10.1 可能返回 grid，但后续 grid-gap 不生效，所以 JS 检测仍需配合 CSS 里的组合 @supports 降级
不要用 try/catch 写内联样式再读取——某些浏览器（如 QQ X5 内核）会静默吞掉非法声明，导致误判

Android WebView 和国产浏览器得看真实内核版本

设备上装着 Chrome 128，不代表 WebView 也支持 Grid。Android 系统 WebView 由 OEM 打包提供，版本常滞后数个大版本。比如 Android 12 出厂 WebView 可能仍是 Chromium 95，而 subgrid 和 gap 在 Blink 95 中存在解析偏差。

必须用 navigator.userAgent 提取真实内核主版本：

const ua = navigator.userAgent;
const chromeMatch = ua.match(/Chrome\/(\d+)\./);
const webviewMatch = ua.match(/WebView\/(\d+)\./);
const kernelVersion = chromeMatch?.[1] || webviewMatch?.[1] || 'unknown';

关键细节：

部分国产浏览器（如 QQ 浏览器）伪造 Chrome/114，但实际内核是旧版 X5，需结合 MQQBrowser 或 UCBrowser 标识二次判断
Android 4.4–7.1 的 WebView 版本通常是 WebView/30～WebView/51，对应 Blink 早期分支，grid-area 命名区域大概率失效
iOS Safari 的 Version/618 是 WebKit 构建号，不是主版本，不能直接映射到 Grid 支持度

真正容易被忽略的是配套特性而非 display 声明本身——gap、subgrid、grid-template-areas 的支持断层比 display: grid 更隐蔽，检测必须覆盖高频使用的组合语法，而不是只看是否“能启用 Grid”。