移動web開發經驗總結(轉)

時間 2019-11-20

原文原文鏈接

1.<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是否容許用戶縮放。javascript

2.-webkit-tap-highlight-color:rgba(255,255,255,0)能夠同時屏蔽ios點擊元素時出現的陰影。css

3.-webkit-appearance:none能夠同時屏蔽輸入框怪異的內陰影。html

4.-webkit-transform:translate3d(0, 0, 0)在ios下可讓動畫更加流暢（這個屬性會調用硬件加速模式），可是在android下不可亂用，會產生不少見所未見的bug。java

5.@-webkit-keyframes能夠預約義不少你所想到的動畫，而後經過-webkit-transition來調用。android

6.-webkit-background-size能夠作高清圖標，不過一些低版本的android只能識別background-size，因此有必要兩個都要寫上；用這個屬性的時候推薦樹勇cover這個值，能夠自動去匹配寬和高。ios

7.多用text-shadow這個屬性，能夠美化文字效果, border-radius、box-shadow、gradient、border-image，在移動端均可以很好的支持，使用這些屬性能夠實現很炫麗的按鈕。css3

8.android、ios4及如下，固定寬/高塊級元素的overflow:scroll/auto失效，屬於瀏覽器的bug，可藉助第三方工具(iScroll)實現。web

10.ios5+能夠經過scrollTo(0,0)來自動隱藏瀏覽器地址欄。瀏覽器

11.css3動畫會影響你的自動聚焦，因此自動聚焦要在動畫執行以前來作，或者直接捨棄。css3動畫

12.input框會默認呼出，若是想隱藏鍵盤讓其失焦便可。

13.當用iScroll時候，不能使用:focus{outline:0}僞類，不然滑動會卡。

14.使用iScroll的時候，在部分手機(部分小米、三星機型)中click會執行兩次，是由於iscroll在判斷滑動前,阻止了click 事件,而後在滑動後,對原來的click事件進行了重構，在一些設備上並無將默認的click阻止掉。因此，出現了相似雙擊的現象。

解決方案：

 
         //1.本身寫一個fn-->myclick，而後onclick="myclick();"調用。 
        
         var 
         t1 =  
         null 
         ; 
         //這個設置爲全局 
        
         function 
         myclick(){ 
        
         if 
         (t1 ==  
         null 
         ){ 
        
         t1 =  
         new 
         Date().getTime(); 
        
         } 
         else 
         {        
        
         var 
         t2 =  
         new 
         Date().getTime(); 
        
         if 
         (t2 - t1 < 500){ 
        
         t1 = t2; 
        
         return 
         ; 
        
         } 
         else 
         { 
        
         t1 = t2; 
        
         } 
        
         } 
        
         /*本身的代碼*/ 
        
         } 
        
         //2.上面的代碼，也能夠寫在iscroll.js（4.2.5）的_end方法中，要注意var t1是全局的 
        
         //3.國外論壇在iscroll.js(4.2.5)對應位置添加 
        
         topOffset: 0, 
        
         checkDOMChanges:  
         false 
         ,    
         // Experimental 
        
         handleClick:  
         true 
         , 
        
         preventGhostClick:  
         false 
         ,  
         // prevent ghost clicks?防止2次點擊 
        
         ghostClickTimeout: 500,    
         // timeout for ghost click prevention設置時間差 
        
         /** 
        
         * Prevents any real clicks. 
        
         * See preventGhostClick portion of _end(). 
        
         */ 
        
         _preventRealClick:  
         function 
         (e) { 
        
         if 
         (e._fake !==  
         true 
         ) { 
        
         e.preventDefault(); 
        
         e.stopPropagation(); 
        
         e.stopImmediatePropagation(); 
        
         e.cancel =  
         true 
         ; 
        
         return 
         false 
         ; 
        
         } 
        
         }, 
        
         _end:  
         function 
         (e) {...... 
        
         ev._fake =  
         true 
         ; 
        
         if 
         (that.options.preventGhostClick) {  
         //preventGhostClick: true, 
        
         // prevent ghost real clicks on body 
        
         document.body.addEventListener( 
         'click' 
         , that._preventRealClick,  
         true 
         ); 
        
         // until ghost click timeout expires 
        
         setTimeout( 
         function 
         () { 
        
         document.body.removeEventListener( 
         'click' 
         , that._preventRealClick,  
         true 
         ); 
        
         }, that.options.ghostClickTimeout); 
        
         } 
        
         target.dispatchEvent(ev); 
        
         //4.使用zepto的tap替換click