如何确保媒体查询 JavaScript 在页面重载后仍能正确响应屏幕尺寸变化-html教程-PHP中文网

如何确保媒体查询 JavaScript 在页面重载后仍能正确响应屏幕尺寸变化

本文解决 matchMedia 监听器在页面跳转或刷新后失效的问题：仅监听 change 事件不足以覆盖初始状态，必须在 DOM 加载完成时主动执行一次匹配检查。

本文解决 `matchmedia` 监听器在页面跳转或刷新后失效的问题：仅监听 `change` 事件不足以覆盖初始状态，必须在 dom 加载完成时主动执行一次匹配检查。

在使用 window.matchMedia() 实现响应式 JavaScript 行为时，一个常见误区是只依赖 "change" 事件监听。该事件仅在媒体查询匹配状态发生切换（如从 matches = true 变为 false）时触发，但当用户通过链接跳转（即使跳转到同一页面，如 <a href="index.html"></a>）导致页面重新加载后，脚本会重新执行，此时 mediaQ.matches 的初始值虽已存在，但 change 事件并不会自动触发——因此元素样式（如 #box 的背景色）将保持默认 CSS 值（red），而非根据当前视口宽度动态设置。

要彻底解决该问题，关键在于：将媒体查询逻辑封装为可复用函数，并在两个时机调用它：

页面 DOM 加载完成时（DOMContentLoaded），确保初始状态正确；
媒体查询匹配状态改变时（change 事件），实现动态响应。

以下是优化后的完整实现：

OpenJDK 24

下载

const mediaQ = window.matchMedia("(max-width: 500px)");

function updateBoxStyle() {
  const box = document.getElementById("box");
  if (!box) return; // 防御性检查，避免元素未就绪时报错

  if (mediaQ.matches) {
    box.style.backgroundColor = "blue";
  } else {
    box.style.backgroundColor = "red";
  }
}

// 监听尺寸变化
mediaQ.addEventListener("change", updateBoxStyle);

// 立即应用初始状态（页面加载完成时）
document.addEventListener("DOMContentLoaded", updateBoxStyle);

✅ 注意事项：

不要遗漏 DOMContentLoaded 监听——这是修复“点击链接后样式丢失”的核心；

推荐将样式操作封装进函数（如 updateBoxStyle），避免重复代码，提升可维护性；

添加 if (!box) return 可防止因 DOM 元素尚未解析导致的 null 错误（尤其在脚本置于中时）；

若需兼容旧版浏览器（如 IE），可改用 attachEvent 或使用 matchMedia polyfill，但现代项目通常无需考虑。