在移動(dòng)端的開(kāi)發(fā)中，我們經(jīng)常需要設(shè)置不同的CSS樣式來(lái)適配不同的設(shè)備。其中，iOS和Android是最為常用的兩個(gè)移動(dòng)操作系統(tǒng)。下面我們將介紹一些常用的CSS樣式，以適配這兩個(gè)平臺(tái)。

1. 禁用移動(dòng)設(shè)備點(diǎn)擊時(shí)的高亮效果

-webkit-tap-highlight-color: transparent;

2. 強(qiáng)制改變移動(dòng)設(shè)備的字體大小

html { 
-webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%; 
text-size-adjust: 100%; 
}

3. 移除iOS設(shè)備下滑動(dòng)時(shí)出現(xiàn)的下拉刷新效果

-webkit-overflow-scrolling: touch;

4. 移除iOS設(shè)備上的橡皮筋效果（彈性滑動(dòng)效果）

overflow: auto; 
-webkit-overflow-scrolling: touch; 
-webkit-backface-visibility: hidden;

5. Android設(shè)備下去除文本框的默認(rèn)內(nèi)部陰影邊框

input[type="text"], 
input[type="password"], 
textarea {
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
}

6. 移除iOS設(shè)備下輸入框自動(dòng)填充背景色

input:-webkit-autofill { 
-webkit-box-shadow: 0 0 0px 1000px #fff inset; 
-webkit-text-fill-color: #333; 
-webkit-border-radius: 0; 
}

7. 移除iOS設(shè)備下輸入框自動(dòng)糾錯(cuò)效果

input[type="text"], 
input[type="password"], 
textarea {
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
-webkit-user-select: auto; 
-moz-user-select: auto; 
user-select: auto; 
}

總的來(lái)說(shuō)，針對(duì)不同的設(shè)備，我們需要設(shè)置不同的CSS樣式來(lái)優(yōu)化用戶體驗(yàn)。希望以上介紹的樣式能夠?qū)σ苿?dòng)端的開(kāi)發(fā)有所幫助。