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

下面舉例說明一個canvas的例子:

<li><canvas></canvas></li>

js動態載入圖片和li 總共舉例17張圖片!
var total=17;

var zWin=$(window);

var render=function(){

  var padding=2;

  var winWidth=zWin.width();

  var picWidth=Math.floor((winWidth-padding*3)/4);

  var tmpl ='';

  for (var i=1;i<=totla;i++){

  var p=padding;

  var imgSrc='img/'+i+'.jpg';

  if(i%4==1){

   p=0;

  }

  tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';

  var imageObj = new Image();

  imageObj.index = i;

  imageObj.onload = function(){

    var cvs =$('#cvs_'+this.index)[0].getContext('2d');

    cvs.width = this.width;

    cvs.height=this.height;

    cvs.drawImage(this,0,0);

  }

  imageObj.src=imgSrc;

  }

 

}

render();

3、假如手機網站不用相容IE瀏覽器,一般我們會使用zeptojs

zeptojs內建Touch events方法,具體可以看http://zeptojs.com/#Touch events

看了一下zeptio新版的API,已經支援IE10以上瀏覽器,對zeptojs可以選擇使用!

4、防止手機中網頁放大和縮小。

這點是最基本的,最為手機網站開發者來說應該都知道的,就是設定meta中的viewport

還有就是,有些手機網站我們看到如下宣告:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

設定了DTD的方式是XHTML的寫法,假如我們頁面運用的是html5,可以不用設定DTD,直接宣告<!DOCTYPE html>。

使用viewport使頁面禁止縮放。 通常把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" />

當然,user-scalable=0,有的人也寫成user-scalable=no,都可以的。

5、apple-mobile-web-app-capable

apple-mobile-web-app-capable是設定Web應用是否以全屏模式執行。

語法:

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

說明:

如果content設定為yes,Web應用會以全屏模式執行,反之,則不會。content的預設值是no,表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。

6、format-detection

format-detection 啟動或禁用自動識別頁面中的電話號碼。

語法:


<meta name="format-detection" content="telephone=no">

說明:

預設情況下,裝置會自動識別任何可能是電話號碼的字串。設定telephone=no可以禁用這項功能。

7、html5呼叫安卓或者ios的撥號功能

html5提供了自動呼叫撥號的標籤,只要在a標籤的href中新增tel:就可以了。

如下:


<a href="tel:10010">10010</a>

8、html5GPS定位功能

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

body {

  -webkit-overflow-scrolling: touch;

  overflow-scrolling: touch;

}


10、禁止複製、選中文字


Element {

  -webkit-user-select: none;

  -moz-user-select: none;

  -khtml-user-select: none;

   user-select: none;

}

解決移動裝置可選中頁面文字(視產品需要而定)

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


element {

  -webkit-touch-callout: none;

}

12、iphone及ipad下輸入框預設內陰影

Element{

  -webkit-appearance: none; 

}

13、ios和android下觸控元素時出現半透明灰色遮罩


Element {

  -webkit-tap-highlight-color:rgba(255,255,255,0)

}


14、active相容處理 即 偽類 :active 失效

方法一:body新增ontouchstart


<body ontouchstart="">

方法二:js給 document 繫結touchstarttouchend事件
<style>

a {

 color: #000;

}

a:active {

 color: #fff;

}

</style>

<a herf=foo >bar</a>

<script>

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

</script>

15、動畫定義3D啟用硬體加速
Element {

  -webkit-transform:translate3d(0, 0, 0)

  transform: translate3d(0, 0, 0);

}

16、Retina屏的1px邊框

具體請百度谷歌關鍵字,解決方案有很多

17、webkit mask 相容處理

某些低端手機不支援css3 mask,可以選擇性的降級處理。

比如可以使用js判斷來引用不同class:


if( 'WebkitMask' in document.documentElement.style){

  alert('支援mask');

} else {

  alert('不支援mask');

}

18、旋轉螢幕時,字型大小調整的問題


html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

  -webkit-text-size-adjust:100%;

}





19、transition閃屏


/設定內嵌的元素在 3D 空間如何呈現:保留3D /

-webkit-transform-style: preserve-3d;

/ 設定進行轉換的元素的背面在面對使用者時是否可見:隱藏 /

-webkit-backface-visibility:hidden;

20、圓角bug

某些Android手機圓角失效


background-clip: padding-box;