@media (orientation: portrait) 和 @media (orientation: landscape) 是唯一稳定可靠的横竖屏检测方案，因 window.orientation、orientationchange、resize 等 JS 方案在现代浏览器中已失效或误判频发，而 CSS 媒体查询语义准确、无干扰、兼容性好。
直接用 @media (orientation: portrait) 和 @media (orientation: landscape) 就够了，其他方式要么失效、要么不可靠。
为什么别碰 window.orientation 和 orientationchange
这两个 API 在 Safari 16.4+、Chrome 95+ 等主流浏览器中已完全不触发 —— 监听了也收不到事件。iOS 上 orientationchange 早就不工作，Android Chrome 行为也不一致，实际项目里等于摆设。
-
window.orientation返回值在现代浏览器中恒为0或undefined，无法区分方向 -
screen.orientation虽能读取当前朝向（如"portrait-primary"），但无法监听变化，且首次访问需用户点击等交互才可能启用 - 依赖
resize事件判断宽高交换，容易误判：键盘弹出、缩放、甚至 iOS 滚动抖动都会触发 resize，导致布局反复切换
@media (orientation: ...) 是唯一稳定方案
CSS 媒体查询里的 orientation 是浏览器原生支持的语义化检测，只在真正横竖屏切换时生效，不受缩放、滚动、软键盘干扰，兼容性覆盖所有现代移动端和桌面浏览器。
- 它基于设备的逻辑方向，不是单纯比较
window.innerWidth和window.innerHeight - 无需 JavaScript，纯 CSS 即可完成表单字段堆叠/并排、导航栏折叠/展开等常见方向适配
- 示例：竖屏时让两个按钮上下排列，横屏时左右对齐
.form-actions {
display: flex;
flex-direction: column;
}
@media (orientation: landscape) {
.form-actions {
flex-direction: row;
justify-content: space-between;
}
}
配合 matchMedia 做 JS 侧响应
如果必须在 JS 中响应方向变化（比如触发动画、加载不同资源），用 matchMedia 替代 resize 节流方案，更精准、无抖动。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
matchMedia('(orientation: landscape)')返回的MediaQueryList对象支持addEventListener('change', ...) - 它和 CSS 中的写法语义一致，不会因视口微小变化误触发
- 注意：首次调用需确保 DOM 已就绪，且不要在未挂载元素上提前监听
示例：
const mql = matchMedia('(orientation: landscape)');
const handleOrientationChange = (e) => {
if (e.matches) {
console.log('进入横屏');
} else {
console.log('回到竖屏');
}
};
mql.addEventListener('change', handleOrientationChange);
// 初始状态也要检查一次
handleOrientationChange(mql);
真正容易被忽略的是：orientation 媒体查询对“可折叠设备”（如 Galaxy Z Fold）或“分屏模式”不敏感 —— 它只认系统报告的设备方向，不是窗口尺寸。这类场景得结合 screen.width / screen.height 或更细粒度的 @media (min-aspect-ratio: 1/1) 来兜底。
