适当调整点按目标的尺寸

当PageSpeed Insights检测到某些点按目标(例如按钮、链接或表单字段)可能过小或距离过近,以致用户不方便在触摸屏上点按时,就会触发此规则。

概览

对于用户来说,如果链接或按钮太小或摆放太密集的话,要想在触摸屏上准确点按这些目标,会比使用传统鼠标光标更费力。为了让用户免去不慎按错位置的困扰,请为每个点按目标设置足够的大小,并让它们之间保持足够的距离,以免用户在点按任何目标时手指触碰到其他任何点按目标。成人的手指指腹平均宽约10毫米(不到半英寸),因此Android界面准则建议最小点按目标尺寸约为7毫米,或在移动视口正确设置的网站上,点按目标至少要达到48 CSS像素。

建议

您应确保网站上最重要的点按目标(用户最常用的目标)足够大,即高/宽至少要达到48 CSS像素(如果您已正确配置您的视口),以便用户轻松点按。不常用链接的尺寸可以较小一些,但仍要与其他链接之间保持一定的距离,以免10毫米宽的手指不慎同时按到两个链接。用户无需张合手指(或依赖其他浏览器界面功能来排除手指点按干扰,如Chrome的弹出式放大镜),即可轻松准确地点按所需的按钮或链接。

将重要的点按目标设置得足够大以易于点按

这种方式比较适合您的用户最常用的点按目标,例如常用操作的按钮、搜索栏、其他重要的表单字段,以及主要的导航链接。这些点按目标的尺寸至少应为7毫米(如果您已正确配置您的视口,即为48 CSS像素),如果小于7毫米,则其周围须留有足够的空间。

确保较小的点按目标之间有足够的空间

对于不常用的链接或按钮,尺寸小于建议的7毫米是没有问题的。不过,其横向和纵向5毫米(32 CSS像素)范围内不应该有其他点按目标,以免用户手指点按一个点按目标时不慎按到其他点按目标。