移動端網頁開發的一些解決方法【轉】

網上看到一片好文，轉載保留

 

高性能 CSS3 動畫

儘量的讓動畫元素不在文檔流中，以減小重排

position :  fixed ; position :  absolute ;

儘量多的利用硬件能力，如使用3D變形來開啓GPU加速

-webkit-transform: translate3d( 0 ,  0 ,  0 ); -moz-transform: translate3d( 0 ,  0 ,  0 ); -ms-transform: translate3d( 0 ,  0 ,  0 ); transform: translate3d( 0 ,  0 ,  0 );

如動畫過程有閃爍（一般發生在動畫開始的時候），能夠嘗試下面的Hack：

-webkit-backface- visibility :  hidden ; -moz-backface- visibility :  hidden ; -ms-backface- visibility :  hidden ; backface- visibility :  hidden ;   -webkit-perspective:  1000 ; -moz-perspective:  1000 ; -ms-perspective:  1000 ; perspective:  1000 ;

儘量少的使用box-shadows與gradients
box-shadows與gradients每每都是頁面的性能殺手，尤爲是在一個元素同時都使用了它們。

---

消除 transition閃屏

兩個方法

-webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ -webkit-backface- visibility :  hidden ; /*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/

---

高頻觸發事件 採用事件節流 或加以控制

好比要綁定一個touchmove的事件，正常的狀況下相似這樣

$( 'div' ).on( 'touchmove' ,  function (){     //.….code });

而若是中間的code須要處理的東西多的話，FPS就會降低影響程序順滑度，而若是改爲這樣

$( 'div' ).on( 'touchmove' ,  function (){     setTimeout( function (){     //.….code     },0); });

把代碼放在setTimeout中，會發現程序變快.

---

移動端 HTML5 audio autoplay 失效問題

因爲自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者沒必要要的流量消耗，因此蘋果系統和安卓系統一般都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發才能夠播放。

解決方法思路：先經過用戶 touchstart 觸碰，觸發播放並暫停（音頻開始加載，後面用 JS 再操做就沒問題了）。

document.addEventListener( 'touchstart' ,  function () {    document.getElementsByTagName( 'audio' )[0].play();    document.getElementsByTagName( 'audio' )[0].pause(); });

---

利用padding或margin得百分比特性作響應式元素

padding 和 margin得 top 和 bottom值設置百分比參數，百分比是相對於寬度計算得距離，利用此特性有助於移動端定位元素位置。

---

使僞類:active生效

要CSS僞類 :active 生效，只須要給 document 綁定 touchstart 或 touchend 事件 解決方法：加入下方js，激活:active。

document.addEventListener( 'touchstart' , function (){}, false );

---

添加分享到朋友圈縮略圖

微信分享連接時，自動抓取縮略圖方法： 須要一張300*300的圖片, 並添加在 body 下，微信會自動抓取這張圖來做爲縮略圖顯示，格式以下：

< div id = "wx_pic" style = "display:none;" >    < img src = "http://www0.autoimg.cn/topic/2015/3/peugeot3008/m/assets/images/share.jpg" > </ div >

---

iOS Safari 委託在document的事件失效

Safari 對click事件定義只能冒泡到body下面的子節點，因此委託在document上得click事件不會被觸發！
解決方法爲body得子節點添加click事件既能夠解決。

$( "body" ).children().click( function () {});

---

iOS Safari 雙擊後事件失效bug

bug 出如今彈出層雙擊空白區域後，瀏覽器scroll下移一部分，頁面點擊事件失效。
解決方法：彈出層禁止touchstart；

---

小米內置瀏覽器 z-index 失效

小米內置瀏覽器z-index失效多數產生在具備css3動畫，或者設置translate3d屬性的場景下。
解決方法: 爲想要提高的層級添加tanslate3d(0,0,0)後在設置z-index解決。

---

Android手機$(window).width() Bug

部門安卓手機經過Zepto.js提供得 $(window).width(); $(window).height()獲取瀏覽器視圖寬度與實際寬度不一致。
解決方法：經過document.documentElement.clientWidth 獲取寬度。

var pageWidth = document.documentElement.clientWidth; var pageHeight = document.documentElement.clientHeight;

---

魅族內置瀏覽器 動態修改className渲染失效

魅族內置瀏覽器 js修改頁面元素className 後渲染失效，問題出如今display:block; 和 部門css3樣式;
解決辦法：觸發scroll強制瀏覽器重繪。

document.body.scrollTop = 2; document.body.scrollTop = 0;

---

關於iOS系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

能夠經過正則去掉

this .value =  this .value.replace(/\u2006/g,  '' );

---

關閉iOS鍵盤首字母自動大寫

在iOS中，默認狀況下鍵盤是開啓首字母大寫的功能的，若是啓用這個功能，能夠這樣：

< input type = "text" autocapitalize = "off" >

---

ios中去掉元素被觸摸時產生的半透明灰色遮罩

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置`-webkit-tap-highlight-color`的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight- color : rgba( 0 , 0 , 0 , 0 ;)}

---

去掉Android中元素被點擊時產生的邊框

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置`-webkit-tap-highlight-color`的alpha值爲0去除部分機器自帶的效果

a,button,input,textarea{    -webkit-tap-highlight- color : rgba( 0 , 0 , 0 , 0 ;)    -webkit-user-modify:read-write-plaintext-only; }

-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符
另外，有些機型去除不了，如小米2
對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

---

去除移動端輸入框內陰影

在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：

input, textarea { 　　 border :  0 ;  /* 方法1 */ 　　-webkit-appearance:  none ;  /* 方法2 */ }

---

移動端禁止選中內容

若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：

.user-select- none {    -webkit-user-select:  none ;   /* Chrome all / Safari all */    -moz-user-select:  none ;      /* Firefox all （移動端不須要） */    -ms-user-select:  none ;       /* IE 10+ */      }

---

手機拍照和上傳圖片

<!-- 選擇照片 --> < input type = "file" accept = "image/*" > <!-- 選擇視頻 --> < input type = "file" accept = "video/*" >

使用總結：
ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能

---

僞元素css3動畫失效

在安卓微信內置瀏覽器中，對一個僞元素作css3動畫失效。

解決方法：
不用僞元素，換成標籤。

---

webview中viewport固定寬度全屏顯示方法

因爲一些移動端遊戲或互動形式 佈局（元素）須要固定大小，又須要自適應屏幕， 
能夠經過設置視口寬度等於固定值讓瀏覽器自動縮放頁面的方法來實現。

< meta name = "viewport" content = "width=640,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1,maximum-scale=1,user-scalable=1" >

其中的width=640就是網頁內容區的寬度，須要在不一樣手機上恰好全屏顯示，target-densitydpi=device-dpi設置後，css中的1px就會等於物理像素中的1px。
補充：因爲safari瀏覽器不支持 target-densitydpi = device-dpi，因此加入JS代碼自動調整縮放比例，調整後的代碼：

< meta name = "viewport" id = "WebViewport" content = "width=640,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=no" >    < script language = "javascript" >     if(screen.width <  640 ) {       document.getElementById('WebViewport').setAttribute('content', ' width = 640 , initial-scale = ' + screen.width / 640 + ' , target-densitydpi = device -dpi, minimum-scale = 0 .1, maximum-scale = 1 , user-scalable = no ');     }  </script>

 

---

三星note2（低版本系統手機）css3動畫fadeIn致使div內滾動閃屏

bug描述：頁面漸入動畫fadeIn，致使設置 fixed 屬性的div內滾動閃屏，滑動後背景閃白，受影響手機可到note4，但閃爍頻率沒有那麼高。

@keyframes fadeIn {    0% {opacity: 0;}    100% {opacity: 1;} } animation: fadeIn .6s both;

解決方法：去掉全部淡入效果，或者針對三星手機去掉css3動畫，或者彈出層不要有滾動條。

 

---

Listview 太長引發的手機性能問題

問題表現： 
內存中存留的DOM結構太多，致使滾動的 Listview 後面，點擊響應會延遲，甚至無響應。

解決方法是:
1.在 li 外面包裹一層，將前面頁碼的 dom 移除，同時設置外層容器的高度（這樣不至於影響滾動條） 
2.下拉滾動翻頁過程當中，對以前頁碼的數據進行隱藏。 
獲取最後一個隱藏的元素，獲得隱藏的頁碼，判斷後2頁中的第5條數據是否在屏幕中。

var $lastHidden = $teacherList.find( 'li[data-show="hidden"]' ).last(),    lastHiddenPage = $lastHidden.data( 'page' ); var $midle = $teacherList.find( 'li[data-page="' + (lastHiddenPage + 2) +  '"]' ).eq(4); if ($midle && $midle.offset() && $midle.offset().top > $(document.body).scrollTop()){    // 頁面中最後一個元素顯示在屏幕中    // problem: 向上滑動過快，這裏有卡頓    $teacherList.find( 'li[data-page="' + lastHiddenPage +  '"]' ).css( 'visibility' ,  'visible' ).data( 'show' ,  'visible' ); }

 

---

IOS 5+快速回彈滾動問題

問題表現： 
IOS5新特性webkit-overflow-scrolling: touch能夠啓動快速回彈滾動（fast bounce-scroll）效果，可是它會阻止渲染直到滾動結束。

影響: 1.從不滾動狀態到滾動狀態（反之亦然），由於要先初始化滾動狀態纔開始渲染，雖然很短暫，但也是有delay的，因此出現閃屏
2.列表滾動過程當中，須要等到滾動結束以後，後面的元素纔會渲染出來

解決方法是:
1.啓動硬件加速，能夠用-webkit-transform: translate3d(0,0,0)，這個hack能夠解決大部分問題
2.用min-height，直接杜絕滾動狀態改變，從而防止閃屏問題（已解決詳情頁閃屏問題）

---

華爲mate7 圖片點擊放大問題

問題表現： 
華爲mate7中，img限制寬高，而且圖片實際尺寸大於限制尺寸，單用戶點擊時，圖片會彈層並被放大。

解決方法是:
添加css樣式：pointer-events: none; 使圖片點透。

 

 

轉自：http://qingui.uis.cc/experience.php