横竖屏切换错位非 bug，是 safari 和部分安卓浏览器对 vw/vh 的特殊处理导致；应改用 100dvw/dvh 或回退 width: 100% + overflow-x: hidden，并确保 viewport 设置正确、媒体查询叠加宽高比判断、flex 子项用 flex: 0 0 280px 防收缩、字体用 clamp() 替代动态 js 计算。
横竖屏切换后 width: 100vw 计算错位
这不是 bug，是 Safari 和部分安卓浏览器对 vw 的特殊处理：横屏时 100vw 会包含已隐藏的地址栏高度（即使 UI 栏不可见），导致实际渲染宽度变小，内容被切掉或横向滚动条意外出现。
更麻烦的是，100vh 同样不稳定——URL 栏伸缩会让视口高度跳变，引发布局闪动或元素错位。
- 改用
100dvw/100dvh（dynamic viewport units），它自动排除浏览器 UI 栏占用空间；但注意 Android Chrome 100 以下不支持 - 稳妥方案是退回到
width: 100%+ 父容器overflow-x: hidden - 若必须用视口单位，至少搭配
min-width: 0或max-width: 100%防止 flex 子项撑开父容器
@media (orientation: landscape) 不触发或延迟生效
这个媒体查询只在浏览器完成重排（reflow）后才重新计算，且依赖 width=device-width 的 <meta name="viewport">。缺了它，或者写了 width=375 这类固定值，@media (orientation: ...) 就完全不工作。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 不要只靠
orientation，叠加宽高比判断更可靠：@media (orientation: landscape) and (min-aspect-ratio: 1.2/1) - 首次加载也要手动检查方向，否则直出横屏页面会错过初始匹配
flex 布局中 sidebar 宽度突然“失效”
常见于 .sidebar { width: 280px; } 却被压缩或撑满——根本原因是父容器用了 display: flex，但没设 flex-shrink: 0 或 flex: 0 0 280px，导致浏览器按剩余空间重新分配宽度。
-
flex: 0 0 280px是关键：禁止收缩、禁止拉伸、基准宽度 280px - 务必配合
box-sizing: border-box，否则 padding/border 会额外增加宽度 - 避免在 flex 子项上同时写
width和flex，CSS 会优先按 flex 规则计算，width可能被忽略
横屏时字体/按钮尺寸突然变小
根源常是根字体动态计算脚本崩了：比如用 document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'，横屏时 window.innerWidth 变成原来的高度值，字号直接缩水。
- 改用
clamp(14px, 4vw, 18px)，vw在横屏下虽有波动，但 clamp 能兜底最小值 - 按钮等可点区域必须设
min-height: 44px，防止横屏缩放后手指点不准 - 侧边栏固定宽度（如
280px）后，主内容区用calc(100vw - 280px)，别用百分比，否则横屏时比例失真
横竖屏切换的错位问题，本质不是单一 CSS 属性写错，而是多个层叠机制（viewport 解析、媒体查询触发时机、flex 分配逻辑、视口单位定义）在方向变化瞬间不同步。真机测试时，地址栏是否隐藏、输入框是否聚焦、页面是否在 iframe 中，都会影响结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
