本文介绍一种可靠的方法，通过监听 orientationchange 事件并结合 matchMedia 检测屏幕朝向，在移动端自动切换 Logo 图片（如竖屏用小图标、横屏用标准 Logo），解决原方案中事件未触发或逻辑失效的问题。
本文介绍一种可靠的方法，通过监听 `orientationchange` 事件并结合 `matchmedia` 检测屏幕朝向，在移动端自动切换 logo 图片（如竖屏用小图标、横屏用标准 logo），解决原方案中事件未触发或逻辑失效的问题。
在响应式 Web 开发中，为提升移动端用户体验，常需根据设备方向（portrait / landscape）动态调整界面元素——例如切换更紧凑的 Logo。但直接监听 orientationchange 事件存在兼容性与触发稳定性问题：该事件在部分 Android 浏览器中不触发，且 iOS Safari 已逐步弃用；同时，依赖全局变量（如 isPortrait、isMobile）易引发状态不同步，导致图片无法及时更新。
✅ 推荐方案是以 matchMedia 为核心检测机制，配合事件监听与初始执行，实现健壮、无状态、零依赖的切换逻辑：
document.addEventListener("DOMContentLoaded", function() {
const logoImage = document.getElementById('logo');
function handleOrientationChange() {
// 使用 matchMedia 实时判断当前朝向（兼容所有现代浏览器）
const isPortrait = window.matchMedia("(orientation: portrait)").matches;
if (isPortrait) {
logoImage.src = './images/logo_small.svg';
} else {
logoImage.src = './images/logo.svg';
}
}
// 页面加载时立即应用一次（确保首屏正确）
handleOrientationChange();
// 监听 orientationchange（作为辅助 fallback）
window.addEventListener("orientationchange", handleOrientationChange);
// 更可靠的补充：监听 matchMedia 的 change 事件（推荐！）
const mediaQuery = window.matchMedia("(orientation: portrait)");
mediaQuery.addEventListener("change", handleOrientationChange);
});? 关键优化说明：
- ✅ 移除不可靠的
isMobile判断：matchMedia本身已具备响应能力，无需额外设备检测逻辑；若确需区分移动/桌面端，建议使用window.innerWidth或专用 UA 检测库，而非硬编码布尔变量。 - ✅ 增加
matchMedia.addEventListener("change")：这是最稳定的方向监听方式，比orientationchange兼容性更好（尤其在 Chrome、Firefox、Safari 中均受支持），且能响应浏览器窗口缩放、DevTools 切换等场景。 - ✅ 路径统一使用相对路径（
./images/...）：避免因部署路径差异导致资源 404；建议同时为<img alt="如何在设备方向变化时动态切换网站 Logo" >添加loading="eager"和decoding="async"提升渲染性能。 - ⚠️ 注意：
screen.orientation.addEventListener("change")在非全屏或非安全上下文（HTTP）下可能被限制，且 API 已标记为实验性，不建议在生产环境使用。
? 进阶提示：
可进一步封装为可复用的 Hook（如在 Vue/React 中），或结合 CSS @media (orientation: ...) 做样式降级；对于 SVG Logo，还可内联关键图标并通过 display 控制显隐，彻底规避图片请求延迟。
只要确保 DOM 就绪后初始化，并绑定 matchMedia.change 事件，即可实现零闪屏、高兼容的方向感知 Logo 切换。
