移动端交互优化问题（一）

1、移动web开发和PCweb开发，有哪些不同？

 通过MVC分析，

M（HTML）：移动开发会关注很多meta标签，通过meta标签来定制行为样式；

V（CSS）：移动开发关注移动设备分辨率适配；

C（javascript）:交互优化、性能优化等；

2、交互优化、性能优化的区别

性能优化：更快

主要通过压缩代码、文件合并、后台直出等方法切实改变响应速度；

交互优化：更好用

通过替代方案改变用户感知到的响应速度

结合移动设备特点，提供更有针对性更好用的体验

3、交互优化场景

场景一：移动端click点击事件有300ms延迟

原因分析：

PC网页没有做移动端分辨率兼容，移动端常使用放大缩小的方案是双击，需区分单击双击，此时设置300ms延迟，300ms内单击两次为双击。

解决方法：

引入移动端框架如zepto，用tap事件代替click

tap:不是原生事件，通过touchstart\touchmove\touchend三个原生事件来模拟tap事件；

基本条件：

a、从触摸到离开时间间隔短；

b、从起点到终点的距离小

点击态：给用户明确的点击反馈，提升用户体验

方案1：使用：active伪类 （不推荐）

缺点：滚动的时候会触发样式

方案2：通过js原理来添加或者移除active样式（推荐）

场景二：移动端滚动问题

全局滚动：滚动条在body节点或更顶层

局部滚动：滚动条在body下的某一个dom节点上

Part1 :实现弹性滚动效果

原因：

ios系统中：

全局滚动：默认支持；

局部滚动：默认没有滚动条，且滑动起来干涩

解决办法：

ios的局部滚动使用弹性滚动效果，只需要将属性挂在body下，

Android版本：

版本较多，表现各异，默认没有弹性滚动效果

-webkit-overflow-scrolling默认浏览器不支持，Android版chrome支持

Part2: ios的出界

触发出界的原因：

全局滚动：滚动到页面顶部（底部）时候继续向下（向上）滚动，就会出现；

局部滚动：滚动到页面顶部时，手指离开停下，在继续向下滑动，就会出现；

解决方案：

局部滚动：使用ScrolllFix，页面固定区域禁止touchmove默认事件；

全局滚动：把全局滚动改为局部滚动；

Andriod下只使用全局滚动；

流畅滚动总结：

1、body上加上webkit-overflow-scrolling:touch

2、ios尽量使用局部滚动

3、ios引进ScrollFix避免出界

4、Android下尽量使用全局滚动代替

1）尽量使用overflow:auto;

2) 使用min-height:100%代替height：100%；

5、ios下带有滚动条且position:absolute的节点不要设置背景色

场景三：键盘定制

定制软键盘样式：可以通过配置input节点的type属性来实现

1）纯粹输入数字：

<input type="tel" />

2）输入数字加符号：

<input type="number"  />

3）让键盘右下角出现搜索按钮：

<input  type="search"  />

用form表单包围起来，在onsubmit事件里面阻止默认行为

4、使用pattern属性设置纯数字；

<input type="text"  pattern="[0-9]*"  />

其他pattern属性值并不支持

定制软键盘行为：可以通过配置input节点的autocapitalize、autocorrect属性

1）输入英文用户名首字母自动大写的问题：通过autocapitalize="off"关闭首字母大写

2）自动纠错的问题：autocorrect=“on”和autocorrect=“off”

兼容性问题：

ios基本都支持；

Android不同版本情况不一样