怎么处理在网页打印（Print）模式下部分媒体查询样式导致 matches 断言失效的 bug-js教程-PHP中文网

window.matchmedia('@media print').matches 仅在打印预览或 window.print() 触发的渲染阶段为 true，非 css 加载即生效；应监听 change 事件而非单次判断，并配合 requestanimationframe 或生命周期钩子确保时机正确。

怎么处理在网页打印（print）模式下部分媒体查询样式导致 matches 断言失效的 bug

网页打印时 window.matchMedia('@media print').matches 返回 false，不是 bug，而是设计行为——它只反映当前渲染上下文是否处于打印预览状态，而非 CSS 规则是否被应用。很多开发者误以为 matches === true 就代表打印样式已生效，结果在 JS 中做条件判断（比如“仅打印时才初始化页码”）却始终不触发，根源在于对 matchMedia 机制的理解偏差。

matchMedia('@media print').matches 什么时候为 true？
仅当浏览器正处于打印预览模式（即用户已按 Ctrl+P / Cmd+P 打开预览窗口）或调用 window.print() 后进入打印流程的极短渲染阶段时，该值才可能为 true。它不会因为页面里写了 @media print { ... } 就自动变 true，也不随 CSS 加载完成而同步更新。

常见误用与修复方式：

不要依赖 matchMedia('@media print').matches 做初始化逻辑
例如下面这段代码大概率失效：

if (window.matchMedia('@media print').matches) {
  initPrintHeader(); // ✗ 很可能 never runs
}

正确做法是监听变化，而不是单次判断：

Soofy

一款通过AI对话帮助用户学习语言的在线学习工具，将语言练习融入真实交流场景。

下载

const mediaQuery = window.matchMedia('print');
function handlePrintChange(e) {
  if (e.matches) {
    // 进入打印预览 → 可执行打印专用初始化（如生成页码 DOM）
    renderPageNumbers();
    document.body.classList.add('printing');
  } else {
    // 退出预览 → 清理
    document.body.classList.remove('printing');
  }
}
mediaQuery.addEventListener('change', handlePrintChange);
// 主动触发一次，覆盖初始状态（部分浏览器支持）
if (mediaQuery.matches) handlePrintChange(mediaQuery);

避免在 @media print 内联样式中混写 JS 依赖逻辑
比如用 <style></style> 动态注入 @media print { .page-num { display: block; } }，再指望 JS 立刻读取 .page-num 的 offsetHeight —— 此时元素可能尚未重排，matches 仍是 false，且样式未应用。应改用 requestAnimationFrame 或 setTimeout(..., 0) 延迟读取。
第三方库（如 React、Vue）中需注意生命周期时机
在组件 mounted 或 useEffect(() => {}, []) 中检查 matches，大概率得到 false。应改用事件监听 + document.readyState === 'complete' 双保险，或在用户显式触发打印前（如点击「导出 PDF」按钮）手动模拟打印上下文。
调试技巧：快速验证当前是否真处于打印上下文
在控制台运行：
```
window.matchMedia('print').matches ? console.log('✅ 在打印预览中') : console.log('❌ 普通浏览模式');
```
注意：Chrome 打印预览中该值为 true；但普通页面即使加载了 @media print 样式，也始终是 false。