摘要：遇到的一些坑問(wèn)題手機(jī)端事件會(huì)有大約的延遲原因手機(jī)端事件，因?yàn)樵谑录|發(fā)之后，瀏覽器要判斷用戶(hù)是否會(huì)做出雙擊屏幕的操作，所以會(huì)等待來(lái)判斷，再做出是否觸發(fā)事件的處理，所以就會(huì)有的延遲解決方法使用事件來(lái)代替事件，如的事件和，還有我自己

問(wèn)題：手機(jī)端 click 事件會(huì)有大約 300ms 的延遲

原因：手機(jī)端事件 touchstart --> touchmove --> touchend or touchcancel --> click，因?yàn)樵趖ouch事件觸發(fā)之后，瀏覽器要判斷用戶(hù)是否會(huì)做出雙擊屏幕的操作，所以會(huì)等待300ms來(lái)判斷，再做出是否觸發(fā)click事件的處理，所以就會(huì)有300ms的延遲

解決方法：使用touch事件來(lái)代替click事件，如 zepto.js 的tap事件和fastClick，還有我自己也寫(xiě)了個(gè)移動(dòng)端手勢(shì)操作庫(kù) mTouch，都有相應(yīng)的事件可以代替click事件解決這個(gè)問(wèn)題

問(wèn)題：在部分機(jī)型下（如小米4、小米2s、中興） body 設(shè)置的 font-size 是用 rem 單位的話(huà)，若其他元素沒(méi)有設(shè)置font-size，該font-size值繼承于body，則會(huì)很高概率出現(xiàn)字體異常變大的情況

原因：估計(jì)是跟app的webview默認(rèn)設(shè)置有關(guān)，body的font-size使用rem單位，就是相對(duì)于當(dāng)前根節(jié)點(diǎn)的font-size來(lái)確定的，可能在某些webview的設(shè)置下，body用的是webview設(shè)置的默認(rèn)字體大小，因?yàn)樵谖医ohtml設(shè)置了一個(gè)px單位的默認(rèn)font-size時(shí)，還是會(huì)出現(xiàn)字體異常變大的情況，具體webview的一些細(xì)節(jié)就沒(méi)有再研究了

解決方法：body設(shè)置一個(gè)px單位的默認(rèn)font-size值，不用rem，或者給字體會(huì)異常變大的元素設(shè)定一個(gè)px單位的font-size值

問(wèn)題：使用zepto的 tap 事件時(shí)會(huì)出現(xiàn)“點(diǎn)透”bug，比如：一個(gè)元素A綁定了tap事件，緊跟其后的元素B綁定了click事件，A觸發(fā)tap事件時(shí)將自己remove掉，B就會(huì)自動(dòng)“掉”到A的位置，接下來(lái)就是不正常的情況，因?yàn)檫@個(gè)時(shí)候B的click事件也觸發(fā)了

原因：因?yàn)閠ap事件是通過(guò) touchstart 、touchmove 、 touchend 這三個(gè)事件來(lái)模擬實(shí)現(xiàn)的，在手機(jī)端事件機(jī)制中，觸發(fā)touch事件后會(huì)緊接著觸發(fā)touch事件坐標(biāo)元素的click事件，因?yàn)锽元素在300ms內(nèi)剛好“掉”回來(lái)A的位置，所以就觸發(fā)了B的click事件，還有zepto的tap事件都是代理到body的，所以想通過(guò)e.preventDefault()阻止默認(rèn)行為也是不可行的

解決方法：（1）A元素?fù)Q成click事件；（2）使用我寫(xiě)的庫(kù) mTouch 來(lái)給A綁定tap事件，然后在事件回調(diào)中通過(guò)e.preventDefault()來(lái)阻止默認(rèn)行為，或者換用其他的支持tap事件的庫(kù)

問(wèn)題 ios自動(dòng)識(shí)別數(shù)字為手機(jī)號(hào)碼，導(dǎo)致部分設(shè)置好的樣式無(wú)效（字體顏色等）

原因 ios自動(dòng)識(shí)別數(shù)字后會(huì)給數(shù)字加上 數(shù)字 標(biāo)簽，所以數(shù)字的部分樣式繼承了a標(biāo)簽的樣式，導(dǎo)致部分樣式無(wú)效

解決方法：（1）meta 標(biāo)簽加上 阻止默認(rèn)識(shí)別數(shù)字為電話(huà)；（2）設(shè)置樣式的時(shí)候 css 選擇器把a(bǔ)標(biāo)簽選上，如：

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

通過(guò)設(shè)置css屬性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手機(jī)端webkit瀏覽器 點(diǎn)擊按鈕或超鏈接之類(lèi)的 默認(rèn)灰色背景色

設(shè)置css屬性 -webkit-user-select:none; 控制用戶(hù)不可選擇文字

區(qū)域性 overflow: scroll | auto 滾動(dòng)時(shí)使用原生效果：-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;    /* 數(shù)值代表顯示幾行 */
-webkit-box-orient: vertical;
}

垂直居中常用方法：

    




/* css樣式 */

/* (1) 模仿單行文字居中的方式 */
.wrap {
width: 200px;
height: 80px;
line-height: 80px;
}

.box {
display: inline-block;
vertical-align:middle;
}

/* (2) 已知寬高，通過(guò)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) 未知寬高，通過(guò)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) 通過(guò)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屏幕實(shí)現(xiàn)真正的1px邊框

/* css樣式 */

.box {
width: 200px;
heigth: 100px;
box-sizing: border-box;
border: 1px solid #aaa;
}

/* 去掉元素原有的邊框 */
.retina-border {
position: relative;
border: none;
}

/* 通過(guò)設(shè)置偽元素放大到2倍的寬高，設(shè)置1px邊框，再縮小1倍，以達(dá)到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;
}

/* 如果只是想設(shè)置一條邊框，可以這樣改一下，以此類(lèi)推 */






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

關(guān)于水平、垂直、多列布局的多種實(shí)現(xiàn)參照：《利用HTML和CSS實(shí)現(xiàn)常見(jiàn)的布局》