Screen Orientation API仅支持读取方向和有限锁定，无法监听变化事件；lock()需全屏+用户手势；兼容性差，推荐用resize事件配合宽高比判断横竖屏。
Screen Orientation API 的实际能力边界
Screen Orientation API（screen.orientation）在平板上**不能直接控制布局**，它只提供读取和（有限条件下）锁定屏幕方向的能力。它的核心作用是：获取当前朝向类型（如 "portrait-primary"）、尝试锁定方向、以及在方向变化后触发回调——但这个“变化”不是由API主动触发的，而是依赖系统底层事件，且监听机制受限。
关键限制有三点：
-
无法监听方向变化事件：API 没有
addEventListener('change', ...)这类接口；screen.orientation.onchange在多数浏览器中不工作或已被移除 -
lock() 方法有严格前提：必须处于全屏模式（
document.documentElement.requestFullscreen()），且需用户手势触发（如点击按钮），页面加载时自动调用会失败 -
兼容性不均衡：Chrome for Android 支持较好；Safari on iPad 仅支持读取（
screen.orientation.type），不支持lock()；Firefox 不支持该 API
真正可用的方向感知方式：resize + 宽高比判断
在平板上稳定识别横竖屏，应放弃监听废弃的 orientationchange 或不可靠的 screen.orientation 监听，转而使用 resize 事件配合视口尺寸逻辑判断：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 设备旋转时，
window.innerWidth和window.innerHeight必然交换或显著变化 - 可定义阈值（如宽高比 > 1.2 判为 landscape，
- 务必加防抖：iOS 等平台在旋转+滚动混合场景下
resize触发极频繁，推荐用setTimeout延迟 150ms 执行布局更新
结合 CSS 实现布局响应
方向感知只是第一步，布局调整应交由 CSS 主导，JavaScript 仅负责切换状态类：
立即学习“前端免费学习笔记（深入）”；
- 在
上动态添加data-orientation="landscape"或"portrait" - 用媒体查询补充基础适配：
@media (orientation: landscape) { ... }（注意：该媒体查询仅反映 CSS 视口朝向，非 JS 获取的物理朝向，但在大多数平板场景下足够可靠） - 对关键容器使用 Flexbox/Grid +
flex-direction或grid-template-columns动态切换，比重排 DOM 更高效
若确需强制横屏显示的注意事项
仅适用于特定场景（如视频播放页、数据看板），且必须满足用户交互前提：
- 绑定在用户点击按钮上：
button.addEventListener('click', () => { document.documentElement.requestFullscreen().then(() => screen.orientation.lock('landscape')); }); - 失败时必须降级处理：
.catch(e => console.warn('横屏锁定失败，保持自适应布局')) - 退出全屏时记得
screen.orientation.unlock()，否则可能影响后续页面行为 - 切勿在
onload中调用 —— 无用户手势，现代浏览器一律拒绝
