为什么需要matchMedia.js？window.matchMedia跨浏览器兼容性完全解析
【免费下载链接】matchMedia.jsmatchMedia polyfill for testing media queries in JS项目地址: https://gitcode.com/gh_mirrors/ma/matchMedia.js
matchMedia.js是一个轻量级的 JavaScript polyfill（补丁库），专门用于在 JS 中测试 CSS 媒体查询，让window.matchMedia在各类浏览器中都能稳定工作。本文将完整解析 matchMedia API 的跨浏览器兼容性差异、matchMedia.js 的实现原理，以及配套的 addListener 监听扩展如何帮助你在响应式布局中监听屏幕变化。
🎯 什么是 window.matchMedia？新手一分钟看懂
window.matchMedia是浏览器提供的一个原生 API，它允许 JavaScript 像 CSS 的@media规则一样，"询问"当前设备是否满足某个媒体查询条件。
它能帮你回答这些问题：
- 📱 用户当前是在手机上，还是大屏电脑上？
- 🔄 设备是横屏还是竖屏（landscape / portrait）？
- 🖨️ 当前是否处于打印预览模式（print media）？
- 📺 是否在电视（tv）等大屏媒体上运行？
一个典型的用途是检测移动端视口宽度，从而切换不同的布局逻辑。官方 README.md 中就列举了测试tv媒体类型、移动端max-width: 480px断点、横屏orientation: landscape等实际场景。
🧩 为什么需要 polyfill？跨浏览器兼容性差异有多大
问题在于：CSS 支持媒体查询 ≠ JS 能调用 matchMedia API。两者的支持时间线并不一致，这正是跨浏览器兼容性的核心痛点。根据 README.md 的说明，各浏览器支持情况如下：
| 浏览器 | 原生 matchMedia API | 说明 |
|---|---|---|
| Chrome | m10 起支持 | 较早期浏览器只支持 CSS 媒体查询 |
| Firefox | 6.0 起支持 | 3.5–5.0 仅支持 CSS 媒体查询 |
| Safari | 5.1 起支持 | 4–5.0 仅支持 CSS 媒体查询 |
| IE 9 | ❌ 不支持 | 有styleMedia旧接口可借用 |
| IE 8 及以下 | ❌ 不支持 | 需依赖 CSS 回退检测 |
测试页面 test/body.html 中还详细标注了各历史版本的行为边界：
- 完全支持 matchMedia：现代 Chrome / Firefox / Safari / Edge
- 仅支持 CSS3 媒体查询（可 polyfill）：IE 9、Firefox 3.5–5.0、Chrome 4–8、Safari 4–5、Opera 9.5–12、iOS 3.2–4.3、Android 2.1–2.3
- 两者都不支持：IE 8 及以下（polyfill 只能退化为纯 CSS 媒体类型判断）
也就是说，如果你的站点需要兼容 IE9 或早期移动浏览器，window.matchMedia会直接是undefined——页面 JavaScript 一调用就报错。matchMedia.js 就是为解决这个问题而生的。
🛠 matchMedia.js 的实现原理：仅 50 行代码的优雅方案
matchMedia.js 主文件只有约 50 行，核心思路非常巧妙，分三步走：
第一步：优先借用浏览器旧接口
如果浏览器存在window.styleMedia（IE 9 及部分早期 WebKit 的旧版 matchMedium API），直接复用它来执行媒体查询判断，性能最优。
第二步：注入隐藏的
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
