移動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）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39087.html
標籤：Html/Css