常見的移動端Web頁面問題

移動端Web須要照顧觸摸操做的體驗,以及更多的屏幕旋轉與尺寸適配等問題,很是瑣碎,在這裏爲你們傾力總結多條常見的移動端Web頁面問題解決方案,歡迎收看收藏!

一、安卓瀏覽器看背景圖片，有些設備會模糊

用同等比例的圖片在PC機上很清楚，可是手機上很模糊，緣由是什麼呢？

通過研究，是devicePixelRatio做怪，由於手機分辨率過小，若是按照分辨率來顯示網頁，這樣字會很是小，因此蘋果當初就把iPhone 4的960640分辨率，在網頁裏只顯示了480320，這樣devicePixelRatio＝2。如今android比較亂，有1.5的，有2的也有3的。

想讓圖片在手機裏顯示更爲清晰，必須使用2x的背景圖來代替img標籤（通常狀況都是用2倍）。例如一個div的寬高是100100，背景圖必須得200200，而後background-size:contain;，這樣顯示出來的圖片就比較清晰了。

代碼能夠以下：

background:url(../images/icon/all.png) no-repeat center center;

-webkit-background-size:50px 50px;

background-size: 50px 50px;display:inline-block; width:100%; height:50px;

或者指定 background-size:contain;均可以

 

二、圖片加載

    遇到圖片加載很慢的問題，對這種狀況，手機開發通常用canvas方法加載：

    具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html

   eg:  <li><canvas></canvas></li>

 1 js動態加載圖片和li 總共舉例15張圖片！
 2 var total=15; 
 3 var zWin=$(window); 
 4 var render=function(){ 
 5   var padding=2; 
 6   var winWidth=zWin.width(); 
 7   var picWidth=Math.floor((winWidth-padding*3)/4); 
 8   var tmpl =''; 
 9   for (var i=1;i<=totla;i++){ 
10   var p=padding; 
11   var imgSrc='img/'+i+'.jpg'; 
12   if(i%4==1){ 
13    p=0; 
14   } 
15   tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>'; 
16   var imageObj = new Image(); 
17   imageObj.index = i; 
18   imageObj.onload = function(){ 
19     var cvs =$('#cvs_'+this.index)[0].getContext('2d'); 
20     cvs.width = this.width; 
21     cvs.height=this.height; 
22     cvs.drawImage(this,0,0); 
23   } 
24   imageObj.src=imgSrc; 
25   } 
26  
27 } 
28 render(); 

View Code

三、假如手機網站不用兼容IE瀏覽器，通常咱們會使用zeptojs。zeptojs內置Touch events方法，具體能夠看http://zeptojs.com/#Touch events

四、防止手機中網頁放大和縮小，這點是最基本的，最爲手機網站開發者來講應該都知道的，就是設置meta中的viewport

     eg: 一般把user-scalable設置爲0來關閉用戶對頁面視圖縮放的行爲 :  <meta name="viewport" content="user-scalable=0" />

     完整的viewport寫法：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

五、web應用是否以全屏模式運行 apple-mobile-web-app-capable

　　eg:  <meta name="apple-mobile-web-app-capable" content="yes">


      說明：若是content設置爲yes，Web應用會以全屏模式運行，反之，則不會。content的默認值是no，表示正常顯示

六、啓動或禁用自動識別頁面中的電話號碼 format-detection   和  撥號功能

    eg: <meta name="format-detection" content="telephone=no">   撥號<a href="tel:4001001,101">4001001轉101</a>


七、上下拉動滾動條時卡頓、慢     Android3+和iOS5+支持CSS3的新屬性爲overflow-scrolling

   eg:   body {

   -webkit-overflow-scrolling: touch;

   overflow-scrolling: touch;

}

八、禁止複製、選中文本 (解決移動設備可選中頁面文本)


   eg:     ele {

  　　 -webkit-user-select: none ;

  　　 -moz-user-select: none ;

 　　  -khtml-user-select: none ;

   　　　　 user-select: none ;

　　}

九、長時間按住頁面出現閃退    -webkit-touch-callout: none;

十、旋轉屏幕時，字體大小調整的問題   -webkit-text-size-adjust:100%;

十一、移動端點擊300ms延遲

　　　　300ms尚可接受，不過由於300ms產生的問題，咱們必需要解決。300ms致使用戶體驗並非很好，解決這個問題，咱們通常在移動端用tap事件來取代click事件。

　　　　推薦兩個js，一個是fastclick，一個是tap.js

　　　　關於300ms延遲，具體請看：http://thx.github.io/mobile/300ms-click-delay/

	<meta name="keywords" content="" /><!--網頁關鍵詞--> <meta name="description" content="" /><!--網頁描述-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><!--適配當前屏幕-->
	<meta name="format-detection" content="telephone=no" /><!--禁止自動識別電話號碼-->
	<meta content="strongail=no" name="format-detection" /><!--禁止自動識別郵箱-->
	<meta name="apple-mobile-web-app-capable" content="yes" /><!--iphone中safari私有meta標籤,容許全屏模式瀏覽,隱藏瀏覽器導航欄-->
	<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--iphone中safari頂端的狀態條的樣式black(黑色)-->

後續會繼續添加。。。。

文章來源：http://www.jb51.net/article/84973.htm