viewport标签必须写为width=device-width, initial-scale=1.0且不加user-scalable=no，否则导致像素映射错乱；应优先用aspect-ratio控制比例、dvh替代vh、transform:scale()实现细线，避免vw/vh和固定border在多屏下的失真问题。
viewport 标签没写对，所有屏幕比例微调都失效
很多开发者以为加了 @media 就能适配不同屏幕比例，结果在 iPhone 15 Pro（屏宽 393px，DPR=3）和 Redmi Note 13（屏宽 412px，DPR=2.75）上按钮位置偏移、文字重叠——根本原因是 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 漏写、写成 width=375 或加了 user-scalable=no。iOS 会强制按 980px 渲染，再缩放，导致 CSS 像素和物理像素映射错乱，后续所有基于视口单位的计算全崩。
必须确保：
-
width=device-width—— 不能是固定值，否则窄屏（如 320px）会被拉伸，宽屏（如 430px）被裁切 -
initial-scale=1.0—— 缺失会导致 Android WebView 默认缩放 0.8，字体模糊、点击区域偏移 - 不加
user-scalable=no—— 除非金融类强风控场景，否则禁用缩放违反 WCAG 可访问性标准
用 aspect-ratio 替代媒体查询判断屏幕比例
传统做法是靠 @media (min-aspect-ratio: 16/9) 或 (max-aspect-ratio: 4/3)，但这些在 Safari 15.4+ 之前不支持，且部分 Android WebView 完全忽略。更稳的方式是直接用 aspect-ratio 控制容器自身比例，再配合 clamp() 或 min()/max() 微调子元素。
例如做横屏视频封面适配：
立即学习“前端免费学习笔记（深入）”；
.video-cover {
aspect-ratio: 16 / 9;
width: 100%;
max-width: 600px;
}
.video-cover::before {
content: "";
display: block;
padding-top: calc(9 / 16 * 100%); /* fallback for old browsers */
}
注意：aspect-ratio 是 CSS 属性，不是媒体查询条件；它让元素主动“守比例”，比被动监听窗口宽高比更可靠，也避免 resize 时反复触发重排。
vw 和 vh 在非标准比例屏上容易失真
100vw 在刘海屏（如 iPhone X 系列）或挖孔屏（如华为 P 系列）上会包含状态栏/导航栏区域，导致内容被遮挡或横向滚动；100vh 在 iOS Safari 中常因地址栏收起/展开而跳变，造成布局抖动。
替代方案：
- 用
dvh（dynamic viewport height）替代vh：支持 Chrome 105+、Safari 16.4+、Firefox 114+，它动态排除地址栏高度 - 窄屏下慎用
vw做 padding/margin：某些 Android 12+ 浏览器横竖屏切换时vw计算卡住一帧，出现短暂空白或错位 - 关键区域（如底部操作栏）改用
env(safe-area-inset-bottom)+padding-bottom，兼容刘海/圆角
针对 DPR 做细线/图标微调必须用 transform: scale() 而非 border
想画 0.5px 细线？别直接写 border: 0.5px solid #ccc —— 大部分浏览器会向上取整为 1px，尤其在 DPR=1 的旧安卓机上。真正生效的是基于 DPR 的缩放。
推荐写法：
.hairline {
position: relative;
}
.hairline::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background-color: #ccc;
transform: scaleY(0.5);
transform-origin: top;
}
原理：先画 1px 高的伪元素，再用 transform: scaleY(0.5) 压缩，浏览器会按当前 DPR 渲染物理像素，DPR=2 时实际占 1 物理像素，DPR=3 时占 1.5 物理像素（四舍五入后仍清晰）。比媒体查询判断 device-pixel-ratio 更轻量、无 JS 依赖。
复杂点在于：transform 会影响层叠上下文，若父容器有 overflow: hidden，需加 z-index 或调整层级；另外，不要对 input 或 button 直接套该伪类，可能干扰焦点样式。
