码迷,mamicode.com
首页 > 移动开发 > 详细

常见的移动web问题,终端触摸交互,各种bug坑如何解决

时间:2020-05-10 19:21:05      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:单行   而不是   star   多行   上拉加载   0ms   第三方库   wrap   自带   

移动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坑如何解决

标签:单行   而不是   star   多行   上拉加载   0ms   第三方库   wrap   自带   

原文地址:https://www.cnblogs.com/chenyingying0/p/12864364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!