隱藏文本框陰影

input, textarea{-webkit-appearance:@none;}

取消手機點擊屏幕時，會出現(xiàn)的灰塊

html,body{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}

移動端網(wǎng)站或APP點擊后出現(xiàn)閃動或灰色背景

只需對綁定事件添加class樣式 使其觸發(fā)事件時背景為透明色

.class{-webkit-tap-highlight-color:transparent;}

移動web開發(fā)經(jīng)驗總結(jié)

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同時屏蔽ios和android下點擊元素時出現(xiàn)的陰影。備注：transparent的屬性值在android下無效。

2、-webkit-appearance:none可以同時屏蔽輸入框怪異的內(nèi)陰影。

3、-webkit-transform:translate3d(0, 0, 0)在ios下可以讓動畫更加流暢（這個屬性會調(diào)用硬件加速模式），但是在android下不可亂用，很多見所未見的bug就是因為這個。

4、@-webkit-keyframes可以預(yù)定義很多你所想到的動畫，然后通過-webkit-transition來調(diào)用。

5、-webkit-background-size可以做高清圖標，不過一些低版本的android只能識別background-size，所以有必要兩個都要寫上；用這個屬性的時候推薦樹勇cover這個值，可以自動去匹配寬和高。

6、text-shadow多用這個屬性，可以美化文字效果。

7、border-radius、box-shadow、gradient、border-image，不解釋，可以精簡代碼。

8、android、ios4及以下，固定寬/高塊級元素的overflow:scroll/auto失效，屬于瀏覽器的bug，可借助第三方工具實現(xiàn)。

9、ios5+可以通過scrollTo(0,0)來自動隱藏瀏覽器地址欄。

10、width可是寬度，initial-scale初始化縮放比例，maximum-scale允許用戶縮 放的最大比例，minimum-scale允許用戶縮放的最小比例，user-scalable是否允許用戶縮放。

11、允許用戶添加到主屏幕，并提供webapp的支持。

12、css3動畫會影響你的自動聚焦，所以自動聚焦要在動畫執(zhí)行之前來做，或者直接舍棄。

13、使用media query適配不同屏幕。

14、如果涉及較多域外鏈接，DNS Prefetching可以幫你做DNS預(yù)解析。

15、如果你希望你的站點更多地在SNS上傳播，那么Open Graph Protocol會比較適合你。

16、當(dāng)用iScroll時候，不能使用:focus{outline:0}偽類，否則滑動會卡。