很多网页在电脑上看着挺好。 一拿到真手机上，就像个半成品。 点一下按钮，悬停状态卡着退不出来。 手指一按，屏幕莫名其妙闪…

很多网页在电脑上看着挺好。 一拿到真手机上，就像个半成品。

点一下按钮，悬停状态卡着退不出来。 手指一按，屏幕莫名其妙闪过一块灰底。 往下划，却触发了该死的下拉刷新。

这要怎么解？ 移动端体验是一组死磕设备的物理约束。 干掉下面这些细节，网页就能像原生应用一样顺滑。

悬停状态卡死？ 用 `@media (hover: hover) and (pointer: fine)` 把代码包起来。

手指按压屏幕闪烁灰蓝光？ 直接杀掉 `-webkit-tap-highlight-color`。

布局高度总是差一点？ 放弃 `100vh`。应用框架用 `100dvh`，首屏大图用 `100svh`。

点进输入框页面自动放大？ 把输入框字体大小限制在最低 16px。

点击总觉得卡顿？ 在 `pointer-down` 阶段就给反馈，配合 `touch-action: manipulation`。

下拉刷新劫持了页面滚动？ 给 `html, body` 加上 `overscroll-behavior: none`。

内容被刘海屏截断？ `viewport-fit=cover` 配合 `env(safe-area-inset-*)` 搞定。

长按按钮变成了选中文字？ 加一行 `user-select: none`。

横向轮播图上下乱串？ 在手势区域设定 `touch-action: pan-y`。

状态栏颜色和页面脱节？ 按配色方案配置 `theme-color`。

最后一条。 在电脑浏览器的模拟器里看着一切完美？ 别信。 老老实实去真机上测。