莫着急... 美好的东西往往来的都比较慢!

23 Aug, 2016

web app遇到的一些坑及小技能

  1. 问题:手机端 click 事件会有大约 300ms 的延迟

    原因:手机端事件 touchstart --\> touchmove --> touchend or touchcancel --> click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟

解决方法:使用touch事件来代替click事件,如 zepto.js 的tap事件和fastClick,还有我自己也写了个移动端手势操作库 mTouch,都有相应的事件可以代替click事件解决这个问题
 

  1. 问题:在部分机型下(如小米4、小米2s、中兴) body 设置的 font-size 是用 rem 单位的话,若其他元素没有设置font-size,该font-size值继承于body,则会很高概率出现字体异常变大的情况

    原因:估计是跟app的webview默认设置有关,body的font-size使用rem单位,就是相对于 当前根节点的font-size来确定的,可能在某些webview的设置下,body用的是webview设置的默认字体大小,因为在我给html设置 了一个px单位的默认font-size时,还是会出现字体异常变大的情况,具体webview的一些细节就没有再研究了

解决方法:body设置一个px单位的默认font-size值,不用rem,或者给字体会异常变大的元素设定一个px单位的font-size值
 

  1. 问题:使用zepto的 tap 事件时会出现“点透”bug,比如:一个元素A绑定了tap事件,紧跟其后的元素B绑定了click事件,A触发tap事件时将自己remove掉,B就会自动“掉”到A的位置,接下来就是不正常的情况,因为这个时候B的click事件也触发了

    原因:因为tap事件是通过 touchstarttouchmovetouchend 这三个事件来模拟实现的,在手机端事件机制中,触发touch事件后会紧接着触发touch事件坐标元素的click事件,因为B元素在300ms内刚好 “掉”回来A的位置,所以就触发了B的click事件,还有zepto的tap事件都是代理到body的,所以想通过 e.preventDefault()阻止默认行为也是不可行的

解决方法:(1)A元素换成click事件;(2)使用我写的库 mTouch 来给A绑定tap事件,然后在事件回调中通过e.preventDefault()来阻止默认行为,或者换用其他的支持tap事件的库
 

  1.             待续...

    一些有用技能点

  1.             通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色

  2.             设置css属性 -webkit-user-select:none; 控制用户不可选择文字

  3.             区域性 overflow: scroll | auto 滚动时使用原生效果:-webkit-overflow-scrolling: touch (ios8+,Android4.0+)

  4.             单行、多行溢出省略

    /* 单行省略 */.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* 多行省略 */.ellipsis-2l {overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;    /* 数值代表显示几行 */-webkit-box-orient: vertical;}
  5.             垂直居中常用方法:

    <body><div class="wrap"><div class="box">div>div>body>/* css样式 */
    
    /* (1) 模仿单行文字居中的方式 */
    .wrap {
    width: 200px;
    height: 80px;
    line-height: 80px;
    }
    
    .box {
    display: inline-block;
    vertical-align:middle;
    }
    
    /* (2) 已知宽高,通过position:absolute; */
    .wrap {
    width: 200px;
    height: 200px;
    position: relative;
    }
    
    .box {
    width: 100px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -40px;
    }
    
    /* (3) 未知宽高,通过css3属性 transfrom */
    .wrap {
    width: 200px;
    height: 200px;
    position: relative;
    }
    
    .box {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    }
    
    /* (4) 通过flex布局 */<body><div class="wrap flexbox flexbox-center flexbox-middle"><div class="box">div>div>body>/* css样式 */
    
    .flexbox {
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex;
    display: flex;
    }
    
    /* 水平居中 */
    .flexbox-center {
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center;
    justify-content: center;
    }
    
    /* 垂直居中 */
    .flexbox-middle {
    -webkit-box-align: center; 
    -moz-box-align: center;
    -ms-flex-align: center; 
    -webkit-align-items: center;
    align-items: center;
    }
  6.             retina屏幕实现真正的1px边框

    <body><div class="box retina-border rt-bd-all">div>body>/* css样式 */
    
    .box {
    width: 200px;
    heigth: 100px;
    box-sizing: border-box;
    border: 1px solid #aaa;
    }
    
    /* 去掉元素原有的边框 */
    .retina-border {
    position: relative;
    border: none;
    }
    
    /* 通过设置伪元素放大到2倍的宽高,设置1px边框,再缩小1倍,以达到0.5px边框的效果*/
    .retina-border:after {
    content: '';
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
  • 上一篇:腾讯技术干货!如何做一个让人闻风丧胆的Html
  • 下一篇:一个完整的Flexbox指南
  • 029-68787028,4000-613-001 & support@xaqinren.com

    西安市高新区沣惠南路与科技七路交汇处西南角, 西水·水岸阳光1号楼1-604号