当页面通过链接跳转后，matchMedia 的 change 事件监听器未触发，导致移动端样式未及时应用；根本原因是缺少页面加载时的初始状态检查，需在 DOMContentLoaded 时主动执行一次匹配逻辑。
当页面通过链接跳转后，`matchmedia` 的 `change` 事件监听器未触发，导致移动端样式未及时应用；根本原因是缺少页面加载时的初始状态检查，需在 `domcontentloaded` 时主动执行一次匹配逻辑。
在使用 window.matchMedia() 实现基于视口宽度的动态样式控制时，一个常见误区是仅依赖 "change" 事件监听器——它只在媒体查询匹配状态发生变化时触发，而不会在页面初次加载、或从其他页面（如点击 <a href="..."></a>）跳转回来时自动执行。这就导致：即使用户已将浏览器窗口缩至 500px 以下，刷新或导航后 #box 背景色仍保持初始的 red，直到手动调整窗口宽度再次触发 change 事件。
✅ 正确做法是：将媒体查询逻辑封装为独立函数，并在两个关键时机调用：
- 页面 DOM 加载完成时（
DOMContentLoaded）→ 确保初始状态准确； - 媒体查询匹配状态改变时（
change事件）→ 实时响应后续缩放/旋转等操作。
以下是优化后的完整实现：
const mediaQ = window.matchMedia("(max-width: 500px)");
function updateBoxStyle() {
const box = document.getElementById("box");
if (!box) return; // 防御性检查：确保元素存在
box.style.backgroundColor = mediaQ.matches ? "blue" : "red";
}
// ✅ 监听媒体查询变化
mediaQ.addEventListener("change", updateBoxStyle);
// ✅ 页面加载完成时立即执行一次，确保初始状态正确
document.addEventListener("DOMContentLoaded", updateBoxStyle);
同时，建议补充 CSS 回退机制，提升健壮性：
#box {
height: 20rem;
width: 20rem;
background-color: red; /* 默认状态（桌面端） */
}
@media (max-width: 500px) {
#box {
background-color: blue; /* 移动端样式（CSS 优先级更高，JS 作为增强） */
}
}
⚠️ 注意事项：
- 不要依赖
window.onload替代DOMContentLoaded，前者等待所有资源（如图片、脚本）加载完毕，延迟更大； - 若页面存在 SPA 路由（如 React Router、Vue Router），需在路由切换后手动调用
updateBoxStyle()，因为此时不触发页面重载； -
matchMedia在旧版 IE 中不支持，如需兼容，应添加 polyfill 或降级为resize事件 +getComputedStyle判断（但性能较差，不推荐）； - 始终对
document.getElementById()返回值做空值判断，避免因 DOM 元素未就绪导致脚本报错。
通过上述改进，无论用户是首次访问、手动缩放窗口，还是点击链接跳转（即使是同域内 HTML 页面跳转），#box 的背景色都能即时、准确地响应当前视口宽度，真正实现可靠的响应式交互控制。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
