数字花园

点按替悬停:让触屏也拥有同一片天

2026-09-17 · 约 3 分钟 · 前端 · 设计 · 随笔

序章:被屏蔽的一半访客

盘点时发现的不是样式问题,是一个更根本的事实:触控设备上,这颗星球的全部交互都被屏蔽了。

太阳状态卡、ISS 过境卡、极光介绍、流星雨日历、星座名字、月亮私语、留言星气泡——全部挂在 pointer: coarse 的门后。iPhone、安卓、Pad 的访客只能看一颗静态的星球。天空只对鼠标敞开,而超过一半的访客用手指。

点按替悬停:一根管线,两代输入

修复的思路只有一条:触屏没有 hover,那 hover 的语义就应该由 tap 来继承。

场景新增触控管线:按下与抬起位移小于十二像素判定为点按——滚动和拖拽不会误触。触点做射线检测,命中优先级从精确到模糊:太阳日轮与 ISS 亮点精确命中,极光带与流星雨按方向夹角,星座按星点,金星按点按选星。命中即派发与桌面同一套事件,DOM 渲染同一张卡。

桌面端一行没动。两代输入设备,一根管线,一个天空。

三档性能:每种设备各得其所

粒子数分了三档:手机四千五、平板与小屏笔电六千五、桌面九千。像素比上限按设备分档——DPR 3 的手机屏全速渲染是最大的发热点,压到合理的填充率,iPhone 上也能流畅地转。

**性能不是一刀切的让步,是按设备画像的分寸。**Pad 此前一直跑着桌面的全量粒子,现在有了自己的档位。

细节里的一百件小事

真正的深度适配在细节里:弹卡在小屏收进视口内、贴边留白;星云辉光按视口收放,不再飘出屏幕;在线人数徽标在窄导航里不再折行;汉堡菜单从导航下方起排、内部可滚动,完整收进一屏;触屏弹出的卡片没有”移开关闭”,六秒自动淡出兜底。

适配不是断点改字号——是承认另一代输入设备的存在,然后把整个世界重新递过去。

沉淀

一颗只对鼠标敞开的天空,不配叫真正的天空。这次更新之后,手指点向太阳、月亮、任何一颗星,都会得到同一份回应。

天空属于所有指着它的人。

评论

← 数字花园