一条 skill 修复移动端网页顽疾:hover 卡死、输入框自动放大等问题一次解决
MxMnr · x · 2026-10-30
前端开发者 emilkowalski 发布了一个 /mobile-native skill,让 AI 编码工具一键修复网站在移动设备上的常见体验问题。他强调这些小问题会累积,值得系统性修掉。
配图给出问题-方案对照表:
- 点击后 hover 态卡住:用 @media (hover: hover) and (pointer: fine) 包裹 hover 样式
- 点击时灰/蓝闪烁:移除 -webkit-tap-highlight-color
- 高度错误:app 用 100dvh,hero 用 100svh
- 点输入框页面自动放大:输入框字号至少 16px
- 点击反馈迟滞:pointer-down 即反馈 + touch-action: manipulation
- 下拉刷新劫持滚动:overscroll-behavior: none
- 刘海遮挡内容:viewport-fit=cover + env(safe-area-inset-)
- 长按选中按钮文字:加 user-select: none
- 状态栏颜色不匹配:按配色设置 theme-color
- 最后提醒:一定要在真机上测试
「编程与Agent」频道最新
- 谷歌开源项目让 AI Agent 像人一样操控真安卓手机，AndroidWorld 得分 99%+ — victor_explore · 2026-10-31
- OpenRouter 团队推出 OpenCommerce：一个接口接入 5000 家商店供 Agent 购物 — ycombinator · 2026-10-31
- YC 总裁：AI 让代码如洪水般涌来，软件工程体系需推倒重建 — garrytan · 2026-10-31
- 宝玉开源 baoyu-design v2：任意模型复刻 Claude Artifacts 高保真原型 — dotey · 2026-10-31
- 一个 prompt 起步,AI 生成 15969 行代码的 3D 开放世界 — jacalulu · 2026-10-31
- Mistral Large 4 以少 47% token 追平 GLM-5.3,价格约为预览版一半 — petrusenko_max · 2026-10-31