web app遇到的一些坑及小技能(持续更新...)

5

遇到的一些坑

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

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

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

  2. 问题:在部分机型下(如小米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值

  3. 问题:使用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事件的库

  4. 问题 ios自动识别数字为手机号码,导致部分设置好的样式无效(字体颜色等)

    原因 ios自动识别数字后会给数字加上 <a href="tel:数字">数字</a> 标签,所以数字的部分样式继承了a标签的样式,导致部分样式无效

    解决方法:(1)meta 标签加上 <meta name="format-detection" content="telephone=no" /> 阻止默认识别数字为电话;(2)设置样式的时候 css 选择器把a标签选上,如:

    <span class="number">123<span> 
    // 原来样式
    .number {
    color: #f00;
    } 
    // 修改后样式
    .number, .number a {
    color: #f00;
    }

一些有用技能点

  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. 垂直居中常用方法:

    <!-- html结构 -->
    <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布局 */
    <!-- html结构 -->
    <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边框

    <!-- html结构 -->
    <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;
    box-sizing: border-box;
    border: 0px solid #aaa;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    }
    
    .rt-bd-all:after {
    border-width: 1px;
    }
    
    /* 如果只是想设置一条边框,可以这样改一下,以此类推 */
    
    <!-- html结构 -->
    <body>
    <div class="box retina-border rt-bd-b"></div>
    </body>
    
    /* css样式 */
    
    .tr-bd-b:after {
    border-bottom-width: 1px;
    }
    
    .tr-bd-t:after {
    border-top-width: 1px;
    }
    
    .tr-bd-l:after {
    border-left-width: 1px;
    }
    
    .tr-bd-r:after {
      border-right-width: 1px;
    }
    
  7. 关于水平、垂直、多列布局的多种实现参照:《利用HTML和CSS实现常见的布局

你可能感兴趣的

10 条评论
黑色杜克 · 2015年12月10日

我看了你的mtouch类库,有点不太懂

(function (global, doc, factory) {
    factory = factory(global, doc, navigator.userAgent);

    //对外提供的接口
    if (typeof global.define === 'function' && (define.amd || define.cmd)) {
        define(function () {
            return factory;
        });
    } else {
        global.mTouch = global.mTouch || factory;
    }

})

这个能不能给具体解释下,看不懂,如果想写成你这样的类库,需要学习哪些方面的东西。大牛指点下

回复

邓木琴居然被盗用了 作者 · 2015年12月10日

这里只是用了闭包对控件的全局或模块返回做了包装而已,没什么特别的意思,可能你平时更多的会这样写:

(function (window) {
    window.util = window.util || {};
})();

等价于这样写:

(function (global, factory) {
    factory = factory(global);
    window.util = window.util  || factory;
})(window, function (global) {
    var util = {};
    return util;
});

这样写的好处,是将模块暴露跟具体实现分离的更清晰一些,而且模块的暴露放在代码的前面,代码阅读者一开始就能清晰的知道这个模块的返回值,而不关心具体实现的人就不需要把整段代码阅读完才知道返回什么东西。

回复

邓木琴居然被盗用了 作者 · 2015年12月10日

其实这个类库也没涉及多少知识点,无非就是touch、click等事件机制的理解以及单击、双击、滑动等手势操作的相互关系理解。

回复

黑色杜克 · 2015年12月10日

对于flex,低版本的Android是不支持的,平时要是在项目中应用,怎么去做兼容

回复

邓木琴居然被盗用了 作者 · 2015年12月10日

可以用table,这篇文章有介绍了很多种方式 http://segmentfault.com/a/1190000003931851

回复

黑色杜克 · 2015年12月10日

里面的东西还算明白,看来闭包我还是没有真正的理解

(function (global, factory) {
    factory = factory(global);
    window.util = window.util  || factory;
})(window, function (global) {
    var util = {};
    return util;
});

这段代码看不懂

回复

邓木琴居然被盗用了 作者 · 2015年12月10日

这不难吧...后面一个()的window,function (global) {...是前面的function的两个参数...

回复

黑色杜克 · 2015年12月10日

大牛,前端时间面试,有关深拷贝与浅拷贝是什么意思?我看你有个有关递归的算法。作为前端菜鸟,给点建议吧。学的很懵懂

回复

邓木琴居然被盗用了 作者 · 2015年12月10日

这种问题百度一下就有一堆,首先要知道怎么利用网络快速找答案

回复

CoreyHsu · 2016年02月23日

学习了!

回复

载入中...