摘要：遇到的一些坑問題手機端事件會有大約的延遲原因手機端事件，因為在事件觸發之后，瀏覽器要判斷用戶是否會做出雙擊屏幕的操作，所以會等待來判斷，再做出是否觸發事件的處理，所以就會有的延遲解決方法使用事件來代替事件，如的事件和，還有我自己

問題：手機端 click 事件會有大約 300ms 的延遲

原因：手機端事件 touchstart --> touchmove --> touchend or touchcancel --> click，因為在touch事件觸發之后，瀏覽器要判斷用戶是否會做出雙擊屏幕的操作，所以會等待300ms來判斷，再做出是否觸發click事件的處理，所以就會有300ms的延遲

解決方法：使用touch事件來代替click事件，如 zepto.js 的tap事件和fastClick，還有我自己也寫了個移動端手勢操作庫 mTouch，都有相應的事件可以代替click事件解決這個問題

問題：在部分機型下（如小米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值

問題：使用zepto的 tap 事件時會出現“點透”bug，比如：一個元素A綁定了tap事件，緊跟其后的元素B綁定了click事件，A觸發tap事件時將自己remove掉，B就會自動“掉”到A的位置，接下來就是不正常的情況，因為這個時候B的click事件也觸發了

原因：因為tap事件是通過 touchstart 、touchmove 、 touchend 這三個事件來模擬實現的，在手機端事件機制中，觸發touch事件后會緊接著觸發touch事件坐標元素的click事件，因為B元素在300ms內剛好“掉”回來A的位置，所以就觸發了B的click事件，還有zepto的tap事件都是代理到body的，所以想通過e.preventDefault()阻止默認行為也是不可行的

解決方法：（1）A元素換成click事件；（2）使用我寫的庫 mTouch 來給A綁定tap事件，然后在事件回調中通過e.preventDefault()來阻止默認行為，或者換用其他的支持tap事件的庫

問題 ios自動識別數字為手機號碼，導致部分設置好的樣式無效（字體顏色等）

原因 ios自動識別數字后會給數字加上 數字 標簽，所以數字的部分樣式繼承了a標簽的樣式，導致部分樣式無效

解決方法：（1）meta 標簽加上 阻止默認識別數字為電話；（2）設置樣式的時候 css 選擇器把a標簽選上，如：

123 
// 原來樣式
.number {
color: #f00;
} 
// 修改后樣式
.number, .number a {
color: #f00;
}

通過設置css屬性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手機端webkit瀏覽器 點擊按鈕或超鏈接之類的 默認灰色背景色

設置css屬性 -webkit-user-select:none; 控制用戶不可選擇文字

區域性 overflow: scroll | auto 滾動時使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）

單行、多行溢出省略

/* 單行省略 */
.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;
}

垂直居中常用方法：

    




/* 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布局 */



    




/* 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;
}

retina屏幕實現真正的1px邊框

/* 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;
}

/* 如果只是想設置一條邊框，可以這樣改一下，以此類推 */






/* 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;
}

關于水平、垂直、多列布局的多種實現參照：《利用HTML和CSS實現常見的布局》