layout viewport宽度在页面加载时初始化后固定不变，不会随屏幕旋转自动重设；width=device-width仅取初始方向的设备宽度，后续orientationchange不触发viewport重解析。
页面旋转时 layout viewport 不会自动重设宽度——它只在页面加载时由 <meta name="viewport"> 初始化一次，之后无论横竖屏切换、缩放或滚动，layout viewport 的 CSS 像素宽高都保持不变（除非你手动触发 reload）。
为什么 rotation 后 width=device-width 不生效
因为 width=device-width 是在页面首次解析时计算并锁定的：此时取的是设备当前方向下的物理宽度（比如 iPhone 14 竖屏时为 390px，横屏时为 844px），但这个值只读取一次。后续 orientationchange 并不会重新触发 viewport 初始化逻辑。
- 浏览器不把屏幕旋转当作“新页面加载”，所以不会重跑 viewport 解析流程
-
document.documentElement.clientWidth会随旋转变化（反映 visual viewport），但 layout viewport 宽度仍维持初始值 - 这意味着
width: 100%元素在横屏后可能撑不开，或 fixed 元素错位
orientationchange 事件能做什么、不能做什么
它只能通知你方向变了，无法修改 layout viewport；但你可以用它来补救布局错位问题。
- 可监听
orientationchange，然后强制重设根元素 font-size 或 rem 基准（配合 JS 动态适配） - 可切换 class 触发媒体查询
@media (orientation: landscape)中的样式规则 - 不可通过 JS 修改
<meta name="viewport">的content属性来“刷新” layout viewport——已失效 - 某些安卓 WebView 对该事件支持不稳定，建议同时监听
resize作为 fallback
真正影响 layout viewport 的只有这三件事
layout viewport 的尺寸只在三个时刻被确定：页面首次加载、硬刷新（F5 / location.reload()）、以及从后台切回前台时部分 iOS Safari 的特殊行为（非标准，不可依赖）。
- 首次加载时，
<meta name="viewport" content="width=device-width">中的device-width取当前方向的设备宽度 - 如果页面初始加载在竖屏，那 layout viewport 就按竖屏宽度（如 390px）初始化；横屏后再旋转回来，它还是 390px
- 没有 API 能在运行时“重置” layout viewport，
document.body.style.width = '100vw'也只作用于 visual viewport 渲染层
最易被忽略的一点：很多开发者以为加了 user-scalable=no 就能锁死 layout viewport，其实它只禁用双指缩放，对屏幕旋转完全无约束——rotation 依然会改变 visual viewport，进而暴露 layout viewport 和 visual viewport 的偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
