用户反馈小图标按钮很难点中,经常点到旁边。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,可点击元素尺寸小于触控推荐范围,视觉尺寸与命中区域一致。
「移动端点击区域」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。别只看报错的最后一行,往上看几行,真正的起因通常在上面。
.icon-btn { position: relative; }
.icon-btn::after { content: ''; position: absolute; inset: -10px; }
同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。
改完隔一天再看一次,当场正常不代表能稳住。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。
具体做法是,扩大实际点击区域;用内边距或伪元素扩展;保持图标视觉尺寸不变。
最后用这个标准收尾,按钮更容易点中,相邻元素之间的误触情况明显减少,操作更顺手。