viewport缺失initial-scale=1或配置错误会导致ios safari退至60hz渲染，使css动画和滚动帧率被硬性锁定；width=device-width必须与initial-scale=1同时存在，且需避免maximum-scale/user-scalable=no干扰合成层调度。
viewport 设置不支持高刷屏缩放会导致动画卡顿
高刷屏（如 90Hz、120Hz、144Hz）本身不会让网页“变快”，但若 viewport 中漏掉 initial-scale=1 或写成 scale=1.0（缺少等号或空格），iOS Safari 和部分安卓 WebView 会退回到 60Hz 渲染节奏，CSS 动画和滚动帧率被硬性锁定在 60fps。这不是浏览器 bug，而是渲染管线降级。
-
width=device-width必须与initial-scale=1同时存在，缺一不可；单独写initial-scale=1.0也不行，必须是initial-scale=1 - 禁止加
maximum-scale或user-scalable=no——它们会强制关闭合成层（compositor layer）的独立刷新调度，导致 transform/opacity 动画无法脱离主线程 - 把
<meta>放在最顶部，避免 DOM 解析过程中触发重排打断帧连续性
CSS 动画属性没走合成层就别指望高刷流畅
即使屏幕支持 120Hz，transform 和 opacity 若未触发 GPU 合成，仍跑在 CPU 主线程上，帧率上限就是 60fps。常见误写：left、top、width、height 动画，或未加 will-change: transform 的过渡元素。
- 只对
transform和opacity做动画；其他属性一律用 JS 控制 class 切换 + CSS 过渡，而非直接改内联样式 - 对频繁动画的元素显式声明
will-change: transform，但不要滥用——每个元素都加会提前创建图层，反而增加内存开销和合成负担 - 用
backface-visibility: hidden强制开启硬件加速，尤其在 iOS 上对rotateY类翻转动画效果明显
Flex/Grid 容器在高 DPR 设备上错位常因 rem/vw 计算失准
高刷屏往往伴随高 DPR（如 iPhone 15 Pro 的 3x），而 rem 依赖根字体大小，vw 在 Safari 旧版本中对 font-size 支持不全。结果是：布局尺寸在逻辑像素层面正确，但在物理像素渲染时出现亚像素模糊或 1px 错位，滚动时尤其明显。
- 避免混用
rem做容器宽高 +px做 border/margin——两者缩放基准不同，高 DPR 下累积误差放大 - 用
clamp(1rem, 4vw, 1.5rem)替代纯vw，既保比例又防极端缩放；注意 Safari 13.1+ 才支持clamp() - 对关键布局容器（如导航栏、卡片外框）加
transform: translateZ(0)强制图层提升，绕过 subpixel 渲染抖动
媒体查询断点没适配高刷屏的 viewport width 变化
某些高刷屏设备（如 iPad Pro 12.9"）在横竖屏切换时，screen.width 不变，但 window.innerWidth 因状态栏/虚拟按键高度变化而波动 ±20px。仅靠 @media (min-width: 768px) 会误判，导致 flex 换行、grid 列数突变，视觉跳变。
- 优先用
@media (min-width: 768px) and (orientation: landscape)组合判断，比单靠宽度更稳 - 对高度敏感区域（如表单页、弹窗），加
@media (max-height: 600px)单独处理键盘弹出后的可用视口收缩 - 避免嵌套媒体查询：
@media (min-width) { @media (orientation) { ... } }在旧版 Chromium 中解析失败，直接写平级规则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
