纯前端无法强制竖屏，但可通过旋转容器+交换宽高+拦截交互实现视觉竖屏效果；推荐用screen.orientation检测方向，配合CSS transform与尺寸调整，并注意fixed元素、输入框及第三方SDK的兼容性问题。
纯前端无法真正“强制”竖屏，但能可靠地让页面在横屏设备上视觉表现为竖屏——核心是旋转容器 + 交换宽高 + 拦截交互干扰。
用 screen.orientation 检测并监听方向变化
现代浏览器推荐用 screen.orientation 而非已废弃的 window.orientation。它返回 portrait-primary、landscape-secondary 等明确类型，兼容性更好（Chrome 38+、Firefox 63+、Safari 17.4+）。
注意：screen.orientation.lock() 需用户手势触发（如点击），且仅对全屏或安装为 PWA 的页面有效；普通网页调用会静默失败。
- 先检查支持性：
if ('orientation' in screen) - 监听变化：
screen.orientation.addEventListener('change', handler) - 获取当前值：
screen.orientation.type（返回字符串，不是数字）
用 CSS @media (orientation: landscape) + transform: rotate() 视觉矫正
媒体查询本身不能锁方向，但配合旋转可实现“看起来是竖屏”的效果。关键在于：旋转后必须交换 width/height，否则内容被裁剪。
立即学习“前端免费学习笔记（深入）”；
常见错误是只写 rotate(90deg) 却没改尺寸，导致页面只显示左上角一小块。
- 横屏时旋转 body：
@media (orientation: landscape) { body { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 0; left: 0; } } - 必须加
position: absolute，否则旋转后仍占原始文档流位置 - 固定定位元素（
position: fixed）会随 body 一起旋转，需单独重置transform
用 meta 标签提示 WebView（仅对部分安卓内核有效）
UC、QQ、微信内置浏览器等基于 X5 内核的 WebView 支持私有 meta 属性，但标准 Chrome/Safari 完全忽略它们。
这类标签不改变行为，只是一种“建议”，实际是否生效取决于宿主 APP 是否解析并响应。
- UC 浏览器：
<meta name="screen-orientation" content="portrait"> - QQ/X5 内核：
<meta name="x5-orientation" content="portrait"> - 不要依赖它做功能兜底，仅作辅助提示
绕过旋转导致的交互错位（点击偏移、滚动失效）
旋转后，鼠标/触摸坐标系未变，但视觉内容已转 90°，直接导致点击区域错位。最稳妥的做法是：不旋转整个页面，而是旋转内容容器，并保持 body 原始尺寸。
例如：给 #app 加 transform: rotate(90deg)，同时用 JS 动态设置其 style.width = window.innerHeight + 'px' 和 style.height = window.innerWidth + 'px'，再用 overflow: hidden 裁剪多余部分。
- 避免对
body或html直接旋转，否则scroll行为异常 - 输入框聚焦时软键盘可能遮挡内容，需监听
resize并调整容器margin-top - Canvas、video 等原生元素旋转后比例易失真，建议用
object-fit或重绘逻辑适配
真正难处理的不是旋转本身，而是 fixed 元素定位、input 聚焦、滚动锚点、第三方 SDK（如埋点、广告）对视口尺寸的硬编码假设——这些往往在横屏下才暴露，且调试困难。
