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)纯粹输入数字:
2)输入数字加符号:
3)让键盘右下角出现搜索按钮:
用form表单包围起来,在onsubmit事件里面阻止默认行为
4、使用pattern属性设置纯数字;
其他pattern属性值并不支持
定制软键盘行为:可以通过配置input节点的autocapitalize、autocorrect属性
1)输入英文用户名首字母自动大写的问题:通过autocapitalize="off"关闭首字母大写
2)自动纠错的问题:autocorrect=“on”和autocorrect=“off”
兼容性问题:
ios基本都支持;
Android不同版本情况不一样