常見的移動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）