Ba la la la ~ 讀者朋友們，你們好啊，又到了冷鋒時間抵知，話不多說，發(fā)車软族！

1.input placeholder問題**

在chrome 模擬移動端調試時［左邊圖］刷喜，顯示的非常正常，但是在真機上［右邊圖］立砸，placeholder里面的內容明顯靠上掖疮，非常的不美觀

在國外網站，對這個屬性的兼容性處理颗祝，那就是不要設計input的line-height或者設置line-height為normal即可浊闪，

試了一下，雖然在谷歌模擬調試里稍微偏上螺戳，但是在“真機上”正常垂直居中～

2.line－h(huán)eight**

line-height經常用于文字居中搁宾，不同手機顯示效果不一樣。什么鬼～

在chrome模擬器上又是顯示得非常完美倔幼，但是盖腿！Android和IOS又各自‘偏移’了。如果把line-height加1px，iPhone文字就會稍微‘正常顯示’翩腐，由于我們app的ios用戶居多鸟款，并且android機型太多，不同機型也會顯示不同茂卦，所以只能退而求其次了何什。line-height的兼容問題不太好解決，容器高度越小等龙，顯示效果的差距越明顯处渣。

解決方案：稍微大一點的高度，最好把line-height設置為高度+1px而咆，兩個平臺顯示都不會太‘奇怪’霍比。

3.使用rem （兼容性：ie9+）**

原理：瀏覽器的默認字體高都是16px，未經調整的瀏覽器在顯示1em=16px暴备。

rem則是只相對于根元素的font-size悠瞬，即只需要設置根元素的font-size，其它元素使用rem單位設置成相應的百分比即可涯捻；

一般使用：

設置html的font-size為62.5%

html {
font-size: 62.5%;
}
body {
font-size: 12px;
font-size: 1.2rem;
}
p {
font-size: 14px;
font-size: 1.4rem;
}

4.實現自定義原生控件的樣式**

由于select移動端原生樣式很丑浅妆，但是原生彈出樣式是符合我們設計的原則

解決方法：將原本select 設置為透明，z-index設置高～再用一個比較好看的樣式‘假裝’在表面

5.移動端使用innerHtml繪制**

使用innerHTML繪制大段障癌，之后想獲取HTML的ID節(jié)點凌外，事實上是獲取不到的，這種問題在動態(tài)創(chuàng)建DOM會經常發(fā)生

這也是一個神器的問題涛浙，博主自己寫了一個移動端輪播插件康辑，在chrome上瀏覽非常正常，但到了真機上卻顯示空白轿亮，各種百度疮薇，最后才發(fā)現這么坑的地方…

解決方案：嘗試了很多方法之后，老老實實在頁面直接用html結構我注，如果有更好的方法按咒，也請告訴我。

6.300ms延遲**

方案一：禁用縮放

在HTML文檔頭部包含如下meta標簽時：

<meta name="viewport" content="user-scalable=no"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>

缺點——就是必須通過完全禁用縮放來達到去掉點擊延遲的目的但骨，然而完全禁用縮放并不是我們的初衷励七，我們只是想禁掉默認的雙擊縮放行為，這樣就不用等待300ms來判斷當前操作是否是雙擊奔缠。

方案二：更改默認的視口寬度

<meta name="viewport" content="width=device-width"/>

如果設置了上述meta標簽掠抬，那瀏覽器就可以認為該網站已經對移動端做過了適配和優(yōu)化，就無需雙擊縮放操作了校哎。

這個方案相比方案一的好處在于两波，它沒有完全禁用縮放，而只是禁用了瀏覽器默認的雙擊縮放行為，但用戶仍然可以通過雙指縮放操作來縮放頁面雨女。

兼容性問題：

對于方案一和方案二，Chrome是率先支持的阳准，Firefox緊隨其后氛堕，然而令Safari頭疼的是，它除了雙擊縮放還有雙擊滾動操作野蝇，如果采用這種兩種方案讼稚，那勢必連雙擊滾動也要一起禁用。

7.點擊穿透**

問題常見發(fā)生場景： 假如頁面上有兩個元素A和B绕沈。B元素在A元素之上锐想。我們在B元素的touchstart事件上注冊了一個回調函數，該回調函數的作用是隱藏B元素乍狐。我們發(fā)現赠摇，當我們點擊B元素，B元素被隱藏了浅蚪，隨后藕帜，A元素觸發(fā)了click事件。

這是因為在移動端瀏覽器惜傲，事件執(zhí)行的順序是touchstart > touchend > click洽故。

而click事件有300ms的延遲，當touchstart事件把B元素隱藏之后盗誊，隔了300ms时甚，瀏覽器觸發(fā)了click事件，但是此時B元素不見了哈踱，所以該事件被派發(fā)到了A元素身上荒适。

如果A元素是一個鏈接，那此時頁面就會意外地跳轉嚣鄙。

解決思路：

1.不要混用touch和click

2.消耗掉touch之后的click

解決方法：

1.只用touch 把頁面內所有click全部換成touch事件（ touchstart 吻贿、’touchend’、’tap’）哑子，注意：a標簽的href也是click舅列，需要換成js的跳轉。

2.改動最小——350ms后再隱藏B元素

8. 虛擬鍵盤導致 fixed 元素錯位**

fixed元素一定會伴隨虛擬鍵盤的出現卧蜓，但是虛擬鍵盤只是“貼”在了viewport上帐要，表面上不會對dom產生“任何”影響，但是這個時候fixed元素表現卻變得怪異起來弥奸，會錯位榨惠。

解決原理：虛擬鍵盤彈出時將fixed元素設置為static，虛擬鍵盤消失時候設置回來。

解決方案：由于虛擬鍵盤出現并未拋出事件赠橙，而檢測scroll或者resize事件耽装，皆會有一定延遲，會出現閃爍現象期揪。則當前獲取焦點元素為文本元素掉奄，就將fixed元素設置為static。

9.移動端手勢**

手指放在屏幕上：ontouchstart 手指在屏幕上滑動：ontouchmove 手指離開屏幕：ontouchend

原理：

1.在touchstart事件觸發(fā)時凤薛， 記錄手指按下的時間startTime姓建，本次滑動的初始位置initialPos。

2.在touchmove事件觸發(fā)時缤苫， 記錄當前位置nowPosition（實時移動元素）速兔，滑動距離movePosition（當前位置nowPosition與初始位置initialPos的差值），判斷正負數再決定是左還是右移動活玲。

3.在touchend事件觸發(fā)時涣狗， 記錄手指離開屏幕的時間endTime，獲得手指在屏幕上停留的時間（endTime－startTime）舒憾，滑動距離movePosition

判斷是否滑動：

如果停留時間少于300ms屑柔，則認為是快速滑動，無論滑動距離是多少珍剑，都到下一頁
滑動距離與‘容器’ 大小進行比較掸宛，若超過‘容器’大小的1/3，則到下一頁

10.iphone動態(tài)生成html元素click失效**

這個也是神奇的坑招拙，找了很久資料唧瘾，也沒有很原理的解釋。

解決方法： 為綁定click的元素增加css樣式 cursor：pointer别凤；

以上為個人意見饰序，如有雷同，純屬巧合规哪，歡迎大家多提意見求豫！Bey 了 個 Bey ~