html移动端旋转屏适配不可靠：window.orientation废弃、screen.orientation支持差，css媒体查询@media (orientation: landscape)最稳定，但仅适用于视觉调整；真锁屏需原生封装，且受平台限制。
HTML 在移动设备上触发旋转屏事件是否可靠
不靠谱，window.orientation 已废弃，screen.orientation 仅部分支持，且多数安卓 WebView（尤其旧版）根本不响应 orientationchange 事件。
真实场景中，你监听了 orientationchange，但横屏时什么也不触发——不是代码写错了，是底层 WebView 压根没把系统旋转事件透上来。
-
screen.orientation.lock("landscape")在 PWA 或原生封装环境里可能生效，但在纯浏览器中多数被忽略（Chrome 自 90+ 默认禁用） - iOS Safari 对
screen.orientation完全不支持，连screen.orientation.type都是只读且固定为"portrait-primary" - 靠
window.innerWidth > window.innerHeight判断“疑似横屏”更实际，但要注意软键盘弹出、地址栏收起也会临时改变尺寸
用 CSS media query 检测横竖屏比 JS 更稳
CSS 的 @media (orientation: landscape) 是唯一跨平台一致生效的方案，浏览器内核原生支持，不依赖 JS 运行时或硬件权限。
它不会“触发”，而是持续匹配——所以适合控制布局切换、隐藏/显示元素、调整字体大小等视觉适配，不适合做“横屏后发请求”这类有副作用的操作。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 别在
@media (orientation: landscape)里写display: none然后指望 JS 能读到该元素的offsetHeight，此时它已脱离渲染流 - 搭配
prefers-reduced-motion一起用可避免动画卡顿引发的误判 - 注意：某些 Android 浏览器（如 Samsung Internet）在折叠屏设备上会错误报告
orientation，需配合hover: hover或pointer: fine做二次过滤
真要锁屏方向？得绕开浏览器直连原生层
纯 HTML 页面无法真正锁定屏幕方向；所谓“锁定”，本质是让 WebView 或宿主容器调用系统 API（如 Android 的 setRequestedOrientation，iOS 的 supportedInterfaceOrientations）。
这意味着你必须用 Cordova、Capacitor、React Native 或小程序框架封装，且各平台行为不一致：
- Capacitor 的
ScreenOrientation.lock("landscape")在 Android 上有效，在 iOS 上仅对 iPad 生效（iPhone 强制竖屏） - Cordova 插件
cordova-plugin-screen-orientation的screen.orientation.lock("landscape")在 Android 12+ 可能被系统策略拦截，需手动在AndroidManifest.xml中加android:screenOrientation="landscape" - 微信小程序用
wx.setScreenBrightness不行，但可用wx.setKeepScreenOn(true)配合 UI 层旋转模拟“伪锁定”
旋转屏适配最常踩的坑：viewport + 缩放 + 输入法联动
你以为改了 CSS 就完事？横屏后用户点输入框，软键盘弹出 → 页面被压缩 → viewport 重算 → 布局错乱 → 你写的 @media (orientation: landscape) 条件突然失效。
- 务必在
<meta name="viewport">中去掉user-scalable=yes，否则 iOS 双指缩放会破坏所有媒体查询判断 - Android 上
height: 100vh在软键盘弹出时会按“可视窗口”计算，导致内容被切掉，改用min-height: 100dvh（dvh是动态视口单位，兼容性需查 CanIUse） - 不要监听
resize事件来重排布局——它在横竖屏切换 + 键盘弹出 + 地址栏收起时高频触发，容易造成重绘风暴
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
