matchMedia 是监听横竖屏最稳定的选择，基于 CSS 媒体查询，仅在真实方向变化时触发，兼容现代浏览器且无需 polyfill；screen.orientation 精确但需用户交互后注册；resize 仅作兜底，须防抖并加宽高比与尺寸双条件判断。
orientationchange 事件已经失效，现代浏览器中无法可靠监听它来检测设备方向变化。
matchMedia 监听横竖屏是最稳的选择
matchMedia 基于 CSS 媒体查询语义，只在真正方向切换时触发，不因缩放、滚动或键盘弹出误判：
- iOS Safari 12.2+、Chrome 74+、Firefox 69+ 全面支持，无需 polyfill
- 不依赖宽高数值比较，不受 viewport 缩放影响
- 首次调用
mql.matches就能读取当前状态，不用等事件
const mql = window.matchMedia('(orientation: landscape)');
mql.addEventListener('change', e => {
if (e.matches) {
document.body.classList.add('landscape');
} else {
document.body.classList.remove('landscape');
}
});
// 立即同步初始状态
if (mql.matches) document.body.classList.add('landscape');
注意：旧版 Safari（≤12.1）需用 mql.addListener()（已废弃但兼容），新项目可忽略。
screen.orientation 可读可监听，但有交互限制
screen.orientation 是唯一标准化的方向 API，返回 "portrait-primary"、"landscape-secondary" 等精确类型：
- 必须在用户手势（如点击）后注册
change事件，否则静默失败 - 首次访问
screen.orientation.type可能为undefined，需配合事件初始化 - Android Chrome 和桌面新版 Edge 支持良好，iOS Safari 16.4+ 支持，但部分 WebView 仍受限
document.getElementById('init-btn').addEventListener('click', () => {
screen.orientation.addEventListener('change', () => {
console.log(screen.orientation.type);
});
// 立即读一次，避免首次漏判
console.log(screen.orientation.type);
});
别指望它在页面加载时自动就绪——没用户点一下，它大概率不会动。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
resize + 宽高比是最后兜底方案
当 matchMedia 和 screen.orientation 都不可用（比如老 WebView 或禁用 JS 的场景），可用 resize 事件配合逻辑判断：
- 不要只写
window.innerWidth > window.innerHeight，折叠屏、分屏、缩放都会导致误判 - 推荐双条件：宽高比 > 1.2 且 较大边 ≥ 600px（排除小尺寸误触）
- 必须加防抖：用
setTimeout延迟 100–150ms 执行，避免 iOS 滚动+旋转混合场景下高频触发
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const w = window.innerWidth;
const h = window.innerHeight;
const isLandscape = w / h > 1.2 && Math.max(w, h) >= 600;
document.body.classList.toggle('landscape', isLandscape);
}, 150);
});
这个方法无法区分 portrait-primary 和 portrait-secondary（上下颠倒），纯做布局适配够用，但别拿它做导航或 AR 场景。
真实项目里，matchMedia 应作为首选，screen.orientation 用于需要精确朝向语义的场景，resize 仅作 fallback。三者混用时，别忘了权限、安全上下文（https/localhost）、用户交互时机这三个硬门槛——漏掉任何一个，监听器都可能安静得像没写过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
