企业官网建设流程全解析

揭秘matchMedia.js核心原理：一行CSS注入如何巧妙实现媒体查询检测

【免费下载链接】matchMedia.jsmatchMedia polyfill for testing media queries in JS项目地址: https://gitcode.com/gh_mirrors/ma/matchMedia.js

matchMedia.js 是一款经典的matchMedia polyfill（媒体查询检测填充库），它能在旧浏览器中实现window.matchMedia()API，让 JavaScript 可以判断 CSS 媒体查询是否命中——比如"当前屏幕宽度是否小于 480px"。整个核心文件只有 50 行代码，靠"注入一行 CSS 再读回元素宽度"的巧思完成检测，堪称前端兼容性的教科书级案例。

为什么需要 matchMedia.js？🤔

现代浏览器都原生支持window.matchMedia()，一行代码就能问出：

if (matchMedia('only screen and (max-width: 480px)').matches) { // 当前是小屏手机，执行一些移动端逻辑 }

但在 2012 年，IE 8 及更早版本根本没有这个 API，而移动端适配却正兴起。开发者想根据屏幕宽度切换 JS 行为（小屏隐藏侧边栏、大屏加载高清图），就只能手写一堆window.innerWidth判断，既啰嗦又不统一。

matchMedia.js 的作者 Scott Jehl、Paul Irish 等人用不到 50 行代码补齐了这个缺口，如今它仍被 Respond.js、Modernizr 等知名库所依赖（见 README.md 中的 Used in 章节）。

核心原理 30 秒速览：注入 CSS，再读回宽度 ✨

这个 polyfill 最精彩的地方，是它没有发明任何"新 API"，而是利用浏览器本身就有的CSS 引擎当"裁判"。整体流程只有三步：

关键在于第②步。以测试screen and (max-width: 480px)为例，库会动态生成这样一段 CSS 并塞进探针标签（见 matchMedia.js 第 29 行）：

@media screen and (max-width: 480px) { #matchmediajs-test { width: 1px; } }

这段代码的妙处在于：

• 媒体查询是否命中，由浏览器 CSS 引擎说了算——和开发者在样式表里写媒体查询完全等价，天然支持orientation、device-width等一切 CSS3 特性；
• 条件命中→ 探针元素宽度变成1px；未命中→@media规则整体失效，宽度保持默认；
• 最后只需读一次width === '1px'，就能返回true/false。

细节 1：跨浏览器的宽度读取

不同浏览器读计算样式的方式不同，代码里用了一个"双保险"（matchMedia.js 第 25 行）：

• 现代浏览器：window.getComputedStyle(style)
• IE 8 及以下：style.currentStyle

写 CSS 文本时同样区分了style.styleSheet.cssText（旧 IE）和style.textContent（其他浏览器），做到一份代码全平台通吃。

细节 2：优先复用浏览器已有能力

并非所有旧浏览器都完全"裸奔"。部分浏览器（如 IE 9、早期 WebKit）虽没有matchMedia，但暴露了更底层的window.styleMedia/window.media对象，自带matchMedium()方法。polyfill 会先检测并使用这个原生通道，只在连styleMedia都没有的浏览器（如 IE 8）才启用上述"CSS 注入"方案（matchMedia.js 第 6-10 行）。这是典型的渐进降级（progressive enhancement）思路：能用原生的绝不造轮子。

如何监听窗口变化？addListener 扩展揭秘 👂

matches值只在调用时是"快照"，窗口一缩放就可能过期。官方用独立的扩展文件 matchMedia.addListener.js 补齐了addListener/removeListener能力，原理同样朴素：

1. 监听全局resize事件，但全页面只挂一个（isListening标志保证），性能友好； 2考虑周到；
2. 事件触发后用setTimeout(..., 30)做30 毫秒防抖，避免拖动窗口时疯狂重复计算（matchMedia.addListener.js 第 13-34 行）；
3. 防抖结束后，逐个重新调用matchMedia()检测每条已注册的查询；
4. 只有当matches值真正翻转（true→false 或 false→true）时，才通知对应的监听回调——避免了同状态下无意义的重复触发。

这套"resize + 防抖 + 状态翻转检测"的组合，正是今天很多框架监听媒体查询变化时仍在沿用的思路。

matchMedia.js 快速上手指南 🚀

整个库 npm 包名为matchmedia-polyfill（见 package.json），只有两个核心文件：

# 安装（npm 包名） npm install matchmedia-polyfill

// 建议两个 polyfill 都引入：基础检测 + 监听能力 require('matchmedia-polyfill'); require('matchmedia-polyfill/matchMedia.addListener');

三个经典使用场景（摘自 README.md Usage 章节）：

// 1. 检测是否电视端媒体类型 if (matchMedia('tv').matches) { /* 电视端逻辑 */ } // 2. 小屏手机检测 if (matchMedia('only screen and (max-width: 480px)').matches) { /* 执行移动端 DOM 逻辑 */ } // 3. 横屏检测 + 变化监听 var mq = matchMedia('all and (orientation:landscape)'); mq.addListener(function(mql) { console.log('现在横屏了吗？', mql.matches); });

想自己跑一遍完整测试，可以打开测试页 test/body.html——里面用弹窗依次验证screen、print、(min-width: 768px)等查询的结果，还顺手做了一组matchMedia()调用的性能压测。

项目结构一览 📁

常见问题 FAQ

Q：现代浏览器还需要它吗？Chrome 10+、Firefox 6+、Safari 5.1+ 均已原生支持matchMedia()（见 README.md Native support 章节）。如今它更多出现在需要兼容老浏览器、或对极简依赖敏感的遗留项目中——50 行代码的体积，几乎没有引入成本。

Q：polyfill 的判断结果和 CSS 里写的媒体查询一致吗？完全一致。因为判断就是交给浏览器 CSS 引擎执行的，JS 只是"问"了一个问题，不存在两套标准。

Q：为什么不直接监听resize事件比较innerWidth？因为媒体查询远不止宽度：orientation、device-pixel-ratio、print、tv等等。让 CSS 引擎来判断，一次搞定所有条件，还能复用浏览器对特性查询的理解，这正是 matchMedia.js "借刀杀人"设计的精髓所在。

小结

matchMedia.js 用 50 行代码证明了一个朴素而强大的思想：当你无法新增 API 时，就借用已有的引擎。一行@mediaCSS 注入、一次宽度读回、一个 30ms 防抖，就补齐了整个浏览器生态的媒体查询检测能力——这也是它历经十余年仍值得每个前端工程师一读的原因。

【免费下载链接】matchMedia.jsmatchMedia polyfill for testing media queries in JS项目地址: https://gitcode.com/gh_mirrors/ma/matchMedia.js