本文介绍一种可靠的方法，通过监听 orientationchange 事件并结合 matchMedia 判断当前屏幕方向，在移动端自动切换 Logo 图片，解决原代码中事件未生效、逻辑冗余及作用域问题。
本文介绍一种可靠的方法，通过监听 `orientationchange` 事件并结合 `matchmedia` 判断当前屏幕方向，在移动端自动切换 logo 图片，解决原代码中事件未生效、逻辑冗余及作用域问题。
在响应式 Web 开发中，为提升移动端用户体验，常需根据设备方向（横屏/竖屏）动态调整界面元素——例如切换更紧凑的 Logo。但直接使用 window.orientation 或盲目绑定多个事件监听器（如 orientationchange + screen.orientation.change）容易导致兼容性差、重复执行或变量作用域混乱等问题。
上述问题代码存在几个关键缺陷：
-
isPortrait和isMobile为未声明的全局变量，存在潜在ReferenceError； - 同时注册
orientationchange和screen.orientation.addEventListener("change", ...)属于冗余监听，且后者在部分浏览器中不触发； -
handleOrientationChange在全局作用域定义，但依赖外部变量（如isMobile），缺乏健壮性与可维护性； -
DOMContentLoaded中仅调用一次函数，未将监听器置于闭包内，易引发内存泄漏或作用域污染。
✅ 推荐方案：封装逻辑、就近声明、单一可信监听源
以下为优化后的完整实现：
<nav>
<a href="/">
<img id="logo" alt="Logo" src="/images/logo.svg">
</a>
<ul class="nav-menu">
<li><a href="about.html">About</a></li>
</ul>
</nav>document.addEventListener("DOMContentLoaded", function () {
const logoImage = document.getElementById("logo");
if (!logoImage) return; // 安全防护：确保 DOM 元素存在
function handleOrientationChange() {
// 使用 matchMedia 判断方向（标准、跨浏览器、无需权限）
const isPortrait = window.matchMedia("(orientation: portrait)").matches;
// 根据方向切换 Logo（路径请按实际项目结构调整）
logoImage.src = isPortrait
? "/images/logo_small.svg"
: "/images/logo.svg";
}
// 首次加载即应用正确 Logo
handleOrientationChange();
// 仅监听 orientationchange（iOS Safari / Android Chrome 主流支持）
window.addEventListener("orientationchange", handleOrientationChange);
// 【可选增强】监听 resize 以兼容桌面端手动缩放或某些 Android 浏览器
// window.addEventListener("resize", () => {
// setTimeout(handleOrientationChange, 100); // 防抖避免高频触发
// });
});? 注意事项与最佳实践：
- ✅
matchMedia("(orientation: portrait)")是 W3C 标准方案，比window.orientation更可靠，且无需特殊权限； - ✅ 将
logoImage提前获取并闭包保存，避免每次事件中重复查询 DOM，提升性能； - ⚠️
orientationchange在部分安卓浏览器中可能不触发（尤其 Chrome 80+ 后逐渐弱化），因此建议搭配resize监听作为降级方案（见注释代码）； - ✅ 所有逻辑包裹在
DOMContentLoaded内，确保 DOM 就绪且避免全局污染； - ? 图片路径统一使用绝对路径（如
/images/...）或相对根路径，避免因页面路由深度不同导致 404。
该方案简洁、健壮、可维护，已在 iOS Safari、Chrome for Android 及主流桌面浏览器中验证有效。如需扩展支持平板横竖屏适配或 CSS 媒体查询联动，可进一步结合 @media (orientation: ...) 进行样式协同控制。
