下面倍阐，就總結(jié)一下移動(dòng)端遇見(jiàn)的坑兰绣。
1.input ? placeholder問(wèn)題
在chrome 模擬移動(dòng)端調(diào)試時(shí)［左邊圖］搪柑，顯示的非常正常聋丝，但是在真機(jī)上［右邊圖］，placeholder里面的內(nèi)容明顯靠上工碾，非常的不美觀
在國(guó)外網(wǎng)站弱睦，對(duì)這個(gè)屬性的兼容性處理，那就是不要設(shè)計(jì)input的line-height或者設(shè)置line-height為normal即可渊额，
試了一下况木，雖然在谷歌模擬調(diào)試?yán)锷晕⑵希窃凇罢鏅C(jī)上”正常垂直居中～
2.line－h(huán)eight
line-height經(jīng)常用于文字居中旬迹，不同手機(jī)顯示效果不一樣火惊。什么鬼～
在chrome模擬器上又是顯示得非常完美，但是奔垦！Android和IOS又各自‘偏移’了屹耐。如果把line-height加1px，iPhone文字就會(huì)稍微‘正常顯示’椿猎，由于我們app的ios用戶(hù)居多惶岭，并且android機(jī)型太多，不同機(jī)型也會(huì)顯示不同犯眠，所以只能退而求其次了按灶。line-height的兼容問(wèn)題不太好解決，容器高度越小筐咧，顯示效果的差距越明顯鸯旁。
解決方案：稍微大一點(diǎn)的高度噪矛，最好把line-height設(shè)置為高度+1px，兩個(gè)平臺(tái)顯示都不會(huì)太‘奇怪’铺罢。
3.使用rem ?（兼容性：ie9+）
原理：瀏覽器的默認(rèn)字體高都是16px艇挨，未經(jīng)調(diào)整的瀏覽器在顯示1em=16px。
rem則是只相對(duì)于根元素的font-size畏铆，即只需要設(shè)置根元素的font-size雷袋，其它元素使用rem單位設(shè)置成相應(yīng)的百分比即可；
一般使用：
設(shè)置html的font-size為62.5%
JavaScript
1
2
3
4
5
6
7
8
9
10
11
html {
? ?font-size: 62.5%;
}
body {
? ?font-size: 12px;
? ?font-size: 1.2rem;
}
p {
? ?font-size: 14px;
? ?font-size: 1.4rem;
}
4.實(shí)現(xiàn)自定義原生控件的樣式
由于select移動(dòng)端原生樣式很丑辞居，但是原生彈出樣式是符合我們?cè)O(shè)計(jì)的原則
解決方法：將原本select 設(shè)置為透明，z-index設(shè)置高～再用一個(gè)比較好看的樣式‘假裝’在表面
5.移動(dòng)端使用innerHtml繪制
使用innerHTML繪制大段蛋勺，之后想獲取HTML的ID節(jié)點(diǎn)瓦灶，事實(shí)上是獲取不到的，這種問(wèn)題在動(dòng)態(tài)創(chuàng)建DOM會(huì)經(jīng)常發(fā)生
這也是一個(gè)神器的問(wèn)題抱完，博主自己寫(xiě)了一個(gè)移動(dòng)端輪播插件贼陶，在chrome上瀏覽非常正常，但到了真機(jī)上卻顯示空白巧娱，各種百度碉怔，最后才發(fā)現(xiàn)這么坑的地方…
解決方案：嘗試了很多方法之后，老老實(shí)實(shí)在頁(yè)面直接用html結(jié)構(gòu)禁添，如果有更好的方法撮胧，也請(qǐng)告訴我。
6.300ms延遲
方案一：禁用縮放
在HTML文檔頭部包含如下meta標(biāo)簽時(shí)：
JavaScript
1
2
缺點(diǎn)——就是必須通過(guò)完全禁用縮放來(lái)達(dá)到去掉點(diǎn)擊延遲的目的老翘，然而完全禁用縮放并不是我們的初衷芹啥，我們只是想禁掉默認(rèn)的雙擊縮放行為，這樣就不用等待300ms來(lái)判斷當(dāng)前操作是否是雙擊铺峭。
方案二：更改默認(rèn)的視口寬度
JavaScript
1
如果設(shè)置了上述meta標(biāo)簽墓怀，那瀏覽器就可以認(rèn)為該網(wǎng)站已經(jīng)對(duì)移動(dòng)端做過(guò)了適配和優(yōu)化，就無(wú)需雙擊縮放操作了卫键。
這個(gè)方案相比方案一的好處在于傀履，它沒(méi)有完全禁用縮放，而只是禁用了瀏覽器默認(rèn)的雙擊縮放行為莉炉，但用戶(hù)仍然可以通過(guò)雙指縮放操作來(lái)縮放頁(yè)面钓账。
兼容性問(wèn)題：
對(duì)于方案一和方案二，Chrome是率先支持的呢袱，F(xiàn)irefox緊隨其后官扣，然而令Safari頭疼的是，它除了雙擊縮放還有雙擊滾動(dòng)操作羞福，如果采用這種兩種方案惕蹄，那勢(shì)必連雙擊滾動(dòng)也要一起禁用。
7.點(diǎn)擊穿透
問(wèn)題常見(jiàn)發(fā)生場(chǎng)景： 假如頁(yè)面上有兩個(gè)元素A和B。B元素在A元素之上卖陵。我們?cè)贐元素的touchstart事件上注冊(cè)了一個(gè)回調(diào)函數(shù)遭顶，該回調(diào)函數(shù)的作用是隱藏B元素。我們發(fā)現(xiàn)泪蔫，當(dāng)我們點(diǎn)擊B元素棒旗，B元素被隱藏了，隨后撩荣，A元素觸發(fā)了click事件铣揉。
這是因?yàn)樵谝苿?dòng)端瀏覽器，事件執(zhí)行的順序是touchstart > touchend > click餐曹。
而click事件有300ms的延遲逛拱，當(dāng)touchstart事件把B元素隱藏之后，隔了300ms台猴，瀏覽器觸發(fā)了click事件朽合，但是此時(shí)B元素不見(jiàn)了，所以該事件被派發(fā)到了A元素身上饱狂。
如果A元素是一個(gè)鏈接曹步，那此時(shí)頁(yè)面就會(huì)意外地跳轉(zhuǎn)。
解決思路：
1.不要混用touch和click
2.消耗掉touch之后的click
解決方法：
1.只用touch ? 把頁(yè)面內(nèi)所有click全部換成touch事件（ touchstart 休讳、’touchend’讲婚、’tap’），注意：a標(biāo)簽的href也是click衍腥，需要換成js的跳轉(zhuǎn)磺樱。
2.改動(dòng)最小——350ms后再隱藏B元素
8. 虛擬鍵盤(pán)導(dǎo)致 fixed 元素錯(cuò)位
fixed元素一定會(huì)伴隨虛擬鍵盤(pán)的出現(xiàn)，但是虛擬鍵盤(pán)只是“貼”在了viewport上婆咸，表面上不會(huì)對(duì)dom產(chǎn)生“任何”影響竹捉，但是這個(gè)時(shí)候fixed元素表現(xiàn)卻變得怪異起來(lái)，會(huì)錯(cuò)位尚骄。
解決原理：虛擬鍵盤(pán)彈出時(shí)將fixed元素設(shè)置為static块差，虛擬鍵盤(pán)消失時(shí)候設(shè)置回來(lái)。
解決方案：由于虛擬鍵盤(pán)出現(xiàn)并未拋出事件倔丈，而檢測(cè)scroll或者resize事件憨闰，皆會(huì)有一定延遲，會(huì)出現(xiàn)閃爍現(xiàn)象需五。則當(dāng)前獲取焦點(diǎn)元素為文本元素鹉动，就將fixed元素設(shè)置為static。
9.移動(dòng)端手勢(shì)
手指放在屏幕上：ontouchstart ? ? 手指在屏幕上滑動(dòng)：ontouchmove ? ? ?手指離開(kāi)屏幕：ontouchend
原理：
1.在touchstart事件觸發(fā)時(shí)宏邮， ?記錄手指按下的時(shí)間startTime泽示，本次滑動(dòng)的初始位置initialPos缸血。
2.在touchmove事件觸發(fā)時(shí)， 記錄當(dāng)前位置nowPosition（實(shí)時(shí)移動(dòng)元素）械筛，滑動(dòng)距離movePosition（當(dāng)前位置nowPosition與初始位置initialPos的差值）捎泻，判斷正負(fù)數(shù)再?zèng)Q定是左還是右移動(dòng)。
3.在touchend事件觸發(fā)時(shí)埋哟， ? 記錄手指離開(kāi)屏幕的時(shí)間endTime笆豁，獲得手指在屏幕上停留的時(shí)間（endTime－startTime），滑動(dòng)距離movePosition
判斷是否滑動(dòng)：
如果停留時(shí)間少于300ms赤赊，則認(rèn)為是快速滑動(dòng)闯狱，無(wú)論滑動(dòng)距離是多少，都到下一頁(yè)
滑動(dòng)距離與‘容器’ ?大小進(jìn)行比較砍鸠，若超過(guò)‘容器’大小的1/3扩氢，則到下一頁(yè)
10.iphone動(dòng)態(tài)生成html元素click失效
這個(gè)也是神奇的坑，找了很久資料爷辱，也沒(méi)有很原理的解釋。
解決方法： ?為綁定click的元素增加css樣式 ? cursor：pointer朦肘；
