常见的移动web问题,终端触摸交互,各种bug坑如何解决
Posted 陈莺莺呀
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了常见的移动web问题,终端触摸交互,各种bug坑如何解决相关的知识,希望对你有一定的参考价值。
移动web最佳viewport设置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
单行文本溢出
.inaline{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
多行文本溢出
.intwoline{ display:-webkit-box !important; overflow:hidden; text-overflow:ellipsis; word-break:break-all; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
移动端click事件响应慢300ms 以及 tap点透的bug:
解决方案:使用fastclick库(听说最新版zepto已经解决这个bug)
touch事件:
安卓机只会触发一次touchstart,一次touchmove,不会触发touchend、
解决方案:在touchmove中加 event.preventDefault();
注意:会导致默认行为不触发,比如scroll,滚动失效
弹性滚动:
是一种缓冲反弹的效果,改善用户体验
body层滚动:
自带弹性滚动,overflow:hidden失效,gif和定时器暂停
局部滚动:
没有弹性滚动,没有滚动惯性,不流畅
解决:局部滚动开启弹性滚动
body{ overflow:scroll; -webkit-overflow-scrolling:touch; }
安卓不支持原生的弹性滚动,需要使用第三方库,如:iScroll
下拉刷新的实现:
顶端下拉一点距离,页面弹性滚动向下
上拉加载的实现:
使用scroll事件,而不是touch事件(安卓机有bug)
以上是关于常见的移动web问题,终端触摸交互,各种bug坑如何解决的主要内容,如果未能解决你的问题,请参考以下文章