最近做的是微信的二次开发,因为是第一次做所以有很多东西要记下来,免得下次在做移动端的时候再经历那么多的坑。
移动端的动画不要使用jq写,jq mobile好像也是不行。
我们的项目最后是使用的css3的动画做成的,(animated.css)。用zepto好像也是一个不错的选择。
移动页面点击时候会有300ms延迟(历史原因),解决的办法有很多。可能使用zepto或者禁止缩放是比较省事的办法。
在移动端的输入框也有点技巧:可以在输入的时候有更好的用户体验,给input的type添加:tel;或者更好的
纯数字键盘:<inpuut type=‘text‘ pattern="[0-9]*"/>
输入字母大小写:autocapitalize=‘off‘ 关闭自动大小写
autocorrect=‘on‘ 自动纠错开启和关闭
再看资料的时候,滚动可能还有的坑和解决方案
全剧滚动:滚动条在body节点或者更高层。
局部滚动:滚动条在body下的某个dom节点。
弹性滚动效果:
ios下的效果:全剧滚动默认支持弹性滚动。
局部滚动需要在dom节点上添加{overflow:auto}或者在body上添加{-webkit-overflow-scrolling:touch;}
建议直接放在body上可以避免小bug。
安卓:原生不支持弹性滚动。
ios: 局部滚动:微信页面会有出界情况。(顶部或者底部会出现出界的情况,),局部滚动会更加难看。
局部滚动解决方案(scrollFix)
if (startTopScroll<=0) {
elem.scrollTop=1;
}
if (startTopScroll+elem.offsetHeight>=elem.scrollHeight) {
elem.scrollTop=elem.scrollHeight-elem.offsetHeight-1;
}
全剧滚动目前没有好的解决办法,只能把全剧滚动改成局部滚动。
安卓:尽量不要用局部滚动,局部滚动有bug。