轉載自Haorooms的文章http://www.haorooms.com/post/phone_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
下面舉例說明一個canvas的例子:
<li><canvas></canvas></li>
s動態加載圖片和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、手機網站儘量不要用jquery,一般我們會使用zeptojs。zeptojs內置Touch events方法,具體可以看http://zeptojs.com/#Touch events
4、防止手機中網頁放大和縮小,這點是最基本的,最爲手機網站開發者來說應該都知道的,就是設置meta中的viewport,一般移動設備要做如下聲明:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
設置了DTD之後就可以使用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,都可以的。
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來確定網頁是否以全屏模式顯示。
兼容性:
iOS 2.1 +
format-detection
format-detection 啓動或禁用自動識別頁面中的電話號碼。
語法:
<meta name="format-detection" content="telephone=no">
說明:
默認情況下,設備會自動識別任何可能是電話號碼的字符串。設置telephone=no可以禁用這項功能。
兼容性
iOS 1.0 +