移動web在ios和android下點擊元素出現陰影問題


 移動web開發經驗總結

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

2、-webkit-appearance:none可以同時屏蔽輸入框怪異的內陰影。
3、-webkit-transform:translate3d(0, 0, 0)在ios下可以讓動畫更加流暢(這個屬性會調用硬件加速模式),但是在android下不可亂用,很多見所未見的bug就是因為這個。
4、@-webkit-keyframes可以預定義很多你所想到的動畫,然后通過-webkit-transition來調用。
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,可借助第三方工具實現。
9、ios5+可以通過scrollTo(0,0)來自動隱藏瀏覽器地址欄。
10、<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">width可是寬度,initial-scale初始化縮放比例,maximum-scale允許用戶縮 放的最大比例,minimum-scale允許用戶縮放的最小比例,user-scalable是否允許用戶縮放。
11、允許用戶添加到主屏幕,並提供webapp的支持。
12、css3動畫會影響你的自動聚焦,所以自動聚焦要在動畫執行之前來做,或者直接舍棄。
13、使用media query適配不同屏幕。
14、如果涉及較多域外鏈接,DNS Prefetching可以幫你做DNS預解析。
15、如果你希望你的站點更多地在SNS上傳播,那么Open Graph Protocol會比較適合你。
16、當用iScroll時候,不能使用:focus{outline:0}偽類,否則滑動會卡。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM