常見的移動端Web頁面問題

移動端Web需要照顧觸摸操作的體驗,以及更多的螢幕旋轉與尺寸适配等問題,非常瑣碎,在這裡為大家傾力總結多條常見的移動端Web頁面問題解決方案,歡迎收看收藏!

1、安卓浏覽器看背景圖檔，有些裝置會模糊

用同等比例的圖檔在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;都可以   2、圖檔加載     遇到圖檔加載很慢的問題，對這種情況，手機開發一般用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

3、假如手機網站不用相容IE浏覽器，一般我們會使用zeptojs。zeptojs内置Touch events方法，具體可以看http://zeptojs.com/#Touch events

4、防止手機中網頁放大和縮小，這點是最基本的，最為手機網站開發者來說應該都知道的，就是設定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" />

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

　　eg: 

<meta name=

"apple-mobile-web-app-capable"

content=

"yes"

>

      說明：如果content設定為yes，Web應用會以全屏模式運作，反之，則不會。content的預設值是no，表示正常顯示

6、啟動或禁用自動識别頁面中的電話号碼 format-detection   和  撥号功能

    eg:

<meta name=

"format-detection"

content=

"telephone=no"

>   撥号<a href="tel:[phone]

,101

">

4001001

轉101

</a>

7、上下拉動滾動條時卡頓、慢    

Android3+和iOS5+支援CSS3的新屬性為overflow-scrolling

   eg:  

body {

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}

8、禁止複制、選中文本 (解決移動裝置可選中頁面文本)

   eg:    

ele {

  　　

-webkit-user-select:

none

;

  　　

-moz-user-select:

none

;

 　　 

-khtml-user-select:

none

;

   　　　　

user-select:

none

;

　　}

9、長時間按住頁面出現閃退   

-webkit-touch-callout:

none

;

10、旋轉螢幕時，字型大小調整的問題  

-webkit-text-size-adjust:

100%

;

11、移動端點選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

轉載于:https://www.cnblogs.com/wuchuanlong/p/6066203.html