开发
API

体验

评分项

开启惯性滚动

惯性滚动会使滚动比较顺畅,在安卓下默认有惯性滚动,而在 iOS 下需要额外设置 -webkit-overflow-scrolling: touch 的样式。

得分条件:
css 中带有 overflow: scroll 的元素,在 iOS 下需要设置 -webkit-overflow-scrolling: touch 样式。

避免使用:active 伪类来实现点击态

使用 CSS :active 伪类来实现点击态,很容易触发,并且滚动或滑动时点击态不会消失,体验较差。
建议使用小程序内置组件的 hover-* 属性来实现。

得分条件:
不使用 :active 伪类,使用 hover-class 替换 :active.

保持图片大小比例

图片若没有按原图宽高比例显示,可能导致图片歪曲,不美观,甚至导致用户识别困难。
可根据情况设置 image 组件的 mode 属性,以保持原图宽高比。

得分条件:
显示的高 / 宽与原图的高 / 宽不超过 15%.

可点击元素的响应区域

我们应该合理地设置好可点击元素的响应区域大小,如果过小会导致用户很难点中,体验很差。

得分条件:
可点击元素的宽高都不小于 20px.

iPhone X 兼容

对于 position: fixed 的可交互组件,如果渲染在 iPhone X 的安全区域外,容易误触 Home Indicator,应当把可交互的部分都渲染到安全区域内。

得分条件:
position: fixed 且高度小于 68px 的可交互组件渲染在安全区域内。

诊断项

继承评分项,无额外的诊断项。

点击纠错
评价此篇文档