根本原因是视口未声明或媒体查询被覆盖，须添加viewport meta标签；旋转需设transform-origin和交换宽高；字体用clamp限制vw范围；点击区域需min-width/min-height且重设maximum-scale。
横屏时页面被压缩或错位，@media (orientation: landscape) 没生效？
根本原因通常是视口未正确声明，或者媒体查询被更宽泛的规则覆盖。必须确保 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 存在于 <head> 中 —— 缺失它，iOS Safari 和部分安卓浏览器会强制以 980px 宽度渲染，orientation 查询就完全失效。
另外，@media (orientation: landscape) 只检测设备自然方向，不响应手动旋转（如某些安卓 WebView）。更稳妥的做法是组合断点：@media (min-width: 768px) and (orientation: landscape) 或直接用 @media (max-height: 480px) 辅助判断窄高状态。
transform: rotate(90deg) 后元素位置乱飞，怎么固定原点？
旋转后元素默认以自身中心为原点，导致偏移不可控。必须显式设置 transform-origin，且要配合 position: absolute 和精确的 top/left 偏移：
- 竖屏转横屏时，把容器设为
width: 100vh; height: 100vw;（交换宽高） - 加
transform-origin: top left;，再用transform: rotate(90deg); - 关键：
left要设为100vw（把元素推到屏幕右侧外），否则旋转后左上角会卡在视口左上角，内容被切掉
注意：IE11 需保留 -ms-transform，但现代项目可只写标准 transform。
立即学习“前端免费学习笔记（深入）”；
横屏下字体/按钮太小，vw 单位为什么反而失真？
vw 基于视口宽度，横屏时 100vw 变成原本的“高度”，数值突变会导致文字忽大忽小。例如设计稿按 375px 宽定义 font-size: 4.27vw（对应 16px），横屏后 100vw ≈ 667px，字体直接跳到约 28px，破坏视觉节奏。
更稳的方案是：
- 对文本类元素，改用
clamp(16px, 4.27vw, 22px)限制上下限 - 关键操作区域（如按钮），优先用
rem+ 动态根字体（通过 JS 监听resize改document.documentElement.style.fontSize） - 避免在横屏专用样式里混用
vw和px，单位不一致会放大计算误差
横屏适配后触摸目标太小，min-height 和 padding 不起作用？
常见陷阱是父容器设置了 overflow: hidden 或 height: 100%，导致子元素的 padding 被截断。横屏下手指操作精度下降，WCAG 要求最小点击区域 ≥ 44×44px。
实操要点：
- 给所有可点击元素加
min-width: 44px; min-height: 44px;（不能只靠padding） - 用
touch-action: manipulation提升 iOS 点击响应速度 - 如果用了
transform: rotate()，务必检查是否触发了新的层叠上下文，导致z-index失效、遮挡点击区域
最易被忽略的是：横屏适配常只关注视觉，却忘了重设 meta viewport 的 maximum-scale —— 用户双指缩放后，44px 实际物理尺寸可能只剩 20px，直接违反可访问性底线。
