{"id":"16745084","account":"mubei","brand":"@mubei","title":"很多网页在电脑上看着挺好。 一拿到真手机上，就像个半成品。 点一下按钮，悬停状态卡着退不出来。 手指一按，屏幕莫名其妙闪…","summary":"很多网页在电脑上看着挺好。 一拿到真手机上，就像个半成品。 点一下按钮，悬停状态卡着退不出来。 手指一按，屏幕莫名其妙闪过一块灰底。 往下划，却触发了该死的下拉刷新。 这要怎么解？ 移动端体验是一组死磕设备的物理约束。 干掉下面这些细节，网页就能像原生应用一样顺滑。 悬停状态卡死…","body":"很多网页在电脑上看着挺好。\n一拿到真手机上，就像个半成品。\n\n点一下按钮，悬停状态卡着退不出来。\n手指一按，屏幕莫名其妙闪过一块灰底。\n往下划，却触发了该死的下拉刷新。\n\n这要怎么解？\n移动端体验是一组死磕设备的物理约束。\n干掉下面这些细节，网页就能像原生应用一样顺滑。\n\n悬停状态卡死？\n用 `@media (hover: hover) and (pointer: fine)` 把代码包起来。\n\n手指按压屏幕闪烁灰蓝光？\n直接杀掉 `-webkit-tap-highlight-color`。\n\n布局高度总是差一点？\n放弃 `100vh`。应用框架用 `100dvh`，首屏大图用 `100svh`。\n\n点进输入框页面自动放大？\n把输入框字体大小限制在最低 16px。\n\n点击总觉得卡顿？\n在 `pointer-down` 阶段就给反馈，配合 `touch-action: manipulation`。\n\n下拉刷新劫持了页面滚动？\n给 `html, body` 加上 `overscroll-behavior: none`。\n\n内容被刘海屏截断？\n`viewport-fit=cover` 配合 `env(safe-area-inset-*)` 搞定。\n\n长按按钮变成了选中文字？\n加一行 `user-select: none`。\n\n横向轮播图上下乱串？\n在手势区域设定 `touch-action: pan-y`。\n\n状态栏颜色和页面脱节？\n按配色方案配置 `theme-color`。\n\n最后一条。\n在电脑浏览器的模拟器里看着一切完美？\n别信。\n老老实实去真机上测。","category":"其它","score":null,"percentile":null,"reason_tags":[],"translated_x_url":null,"translated_status_id":null,"published_at":"2026-08-11 21:32:11","created_at":"2026-08-11T23:22:15+02:00"}