小程序 视觉体验优化

Question

1. 为 overflow: scroll 的元素开启惯性滚动

wxss 中带有 overflow: scroll 的元素，在安卓下默认有惯性滚动，而在 iOS 下需要额外设置，在 iOS 下需要设置 -webkit-overflow-scrolling: touch 样式

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

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

3. 保持图片大小比例

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

4. 可点击元素的响应区域，宽高都不小于 20px

5. iPhone X 兼容

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

建议使用以下 wxss 进行兼容

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

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

6. 窗口变化适配

使用 match-media 组件、 MatchMediaObserver 或者 @media 媒体查询对页面补充适配逻辑。