移动端H5横屏效果本质是CSS视觉旋转+视口宽高互换：html设width:100vh/height:100vw并rotate(90deg)，配合viewport禁缩放及orientation媒体查询，特殊元素需单独适配。
移动端 H5 横屏模式下视口宽高互换，本质是让页面在竖屏手持时仍“视觉上”呈现横屏效果。这不是靠系统强制旋转屏幕（H5 无此权限），而是通过 CSS 视觉变换 + 视口逻辑调整来实现的。关键不在“真实旋转设备”，而在“让内容按横屏逻辑布局和渲染”。
核心：用 CSS transform 旋转容器并交换宽高单位
最常用且兼容性好的方案，是将 html 或根容器整体逆时针旋转 90°，同时把原本的 width: 100vw 改为 height: 100vw、height: 100vh 改为 width: 100vh——这就是宽高互换的实质。
- 设置
html { width: 100vh; height: 100vw; }：让容器尺寸按当前视口的“高”当宽、“宽”当高来占满 - 添加
transform: rotate(90deg);：视觉上翻转内容，使原本竖排的文字/按钮变成横排阅读方向 - 指定
transform-origin: 50vh 50vw;或更稳妥的transform-origin: top left;：避免旋转后内容偏移出屏
必须配合 viewport 元标签禁用缩放干扰
如果视口允许缩放或初始比例不准，旋转后的布局会错位或留白。务必在 <head> 中声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-
width=device-width确保逻辑像素宽度对齐设备，是后续 vw/vh 计算的基础 -
user-scalable=no防止用户双击放大导致旋转后内容被裁切 -
viewport-fit=cover在 iPhone X 及以上全面屏机型中覆盖“安全区域”，避免黑边
用 @media (orientation: landscape) 更稳地做样式分支
比起监听 resize 并手动计算宽高，现代浏览器推荐优先使用 CSS 媒体查询判断方向：
@media (orientation: landscape) { /* 横屏专属样式，比如 flex-direction: row */ }@media (orientation: portrait) { /* 竖屏样式，比如提示层显示“请横屏观看” */ }- 这个判断基于 viewport 宽高比，不依赖陀螺仪，不受键盘弹出或缩放影响，iOS Safari 12.2+ 和 Chrome 74+ 全面支持
注意 Canvas 或视频等特殊元素的适配陷阱
如果你页面里有 <canvas> 或 <video>，直接对父容器做 CSS 旋转会导致事件坐标错乱或全屏行为异常：
- Canvas：改用框架内建旋转（如 CreateJS 的
stage.rotation = 90），再配合stage.x = canvasHeight调整定位原点 - Video：进入全屏前先设
object-fit: contain或cover，并用100dvh替代100vh避免 iOS 地址栏隐藏导致的高度跳变 - 所有含绝对定位或 fixed 元素，旋转后需重新检查
top/left是否仍落在可视区内
