移動Web開發圖檔自适應兩種常見情況解決方案

本文主要說的是Web中圖檔根據手機螢幕大小自适應居中顯示，圖檔自适應兩種常見情況解決方案。開始吧

在做配合手機用戶端的Web wap頁面時，發現文章對圖檔顯示的需求有兩種特别重要的情況，一是對于圖集，這種文章隻需要左右滑動浏覽，最好的體驗是讓圖檔縮放顯示在螢幕有效範圍内，防止圖檔太大導緻使用者需要滑動手指移動圖檔來檢視這種費力氣的事情，使用者體驗大大降低。二是圖文混排的文章，圖檔最大寬度不超過螢幕寬度，高度可以auto。這兩種情況在項目中很常見。另外，有人說做個圖檔切割工具，把圖檔尺寸比例都設定為統一的大小，但即使這樣，面對各種大小的移動裝置螢幕，也是無法适用一個統一方案就能解決得了的。而且如果需求太多，那伺服器上得存多少份不同尺寸的圖檔呢？顯示不太符合實際。

下面是圖集類型，需求方要求圖檔高寬都保持在手機可視視野範圍，js代碼列在下面：

<script type="text/javascript">
$(function(){

var imglist =document.getElementsByTagName("img");
//安卓4.0+等高版本不支援window.screen.width，安卓2.3.3系統支援
/*
var _width = window.screen.width;
var _height = window.screen.height - 20;

var _width = document.body.clientWidth;
var _height = document.body.clientHeight - 20;
*/
var _width, 
	_height;
doDraw();

window.onresize = function(){
	doDraw();
}

function doDraw(){
	_width = window.innerWidth;
	_height = window.innerHeight - 20;
	for( var i = 0, len = imglist.length; i < len; i++){
		DrawImage(imglist[i],_width,_height);
	}
}

function DrawImage(ImgD,_width,_height){ 
	var image=new Image(); 
	image.src=ImgD.src; 
	image.onload = function(){
		if(image.width>30 && image.height>30){ 
	 
			if(image.width/image.height>= _width/_height){ 
				if(image.width>_width){
					ImgD.width=_width; 
					ImgD.height=(image.height*_width)/image.width; 
				}else{ 
					ImgD.width=image.width; 
					ImgD.height=image.height; 
				} 
			}else{ 
				if(image.height>_height){
					ImgD.height=_height; 
					ImgD.width=(image.width*_height)/image.height; 
				}else{ 
					ImgD.width=image.width; 
					ImgD.height=image.height; 
				} 
			}
		}	
	}

}
   
})
</script>
           

注意：測試中發現安卓4.0+的系統對window.screen.width屬性支援的不好，很多情況在首次加載時傳回的螢幕像素不正确。本人的安卓2.3.3系統測試通過，支援該屬性。據說，這是安卓系統的bug，可以通過setTimeout設定延時時間來解決這個問題。不過，這個方法，本人怎麼測試都行不通。是以幹脆還是另尋高明吧。發現window.innerWidth可以擔此重任，沒有發現相容問題，ok。

下面是，第二種情況，圖文并茂的文章類型。這時候隻對圖檔寬度和手機寬度适應有要求，對高度不做限制，相對容易些。

改造上面的javascript代碼，如下：

<script type="text/javascript">
$(function(){
var imglist =document.getElementsByTagName("img");
//安卓4.0+等高版本不支援window.screen.width，安卓2.3.3系統支援
var _width;
doDraw();

window.onresize = function(){
	//捕捉螢幕視窗變化，始終保證圖檔根據螢幕寬度合理顯示
	doDraw();
}

function doDraw(){
	_width = window.innerWidth;
	for( var i = 0, len = imglist.length; i < len; i++){
		DrawImage(imglist[i],_width);
	}
}

function DrawImage(ImgD,_width){ 
	var image=new Image(); 
	image.src=ImgD.src; 
	image.onload = function(){
		//限制，隻對寬高都大于30的圖檔做顯示處理
		if(image.width>30 && image.height>30){ 
			if(image.width>_width){
				ImgD.width=_width; 
				ImgD.height=(image.height*_width)/image.width; 
			}else{ 
				ImgD.width=image.width; 
				ImgD.height=image.height; 
			} 

		}	
	}

}
   
})
</script>
           

說明：代碼中的resize函數，是捕捉螢幕視窗變化，始終保證圖檔根據螢幕寬度合理顯示。當然了，前提是像我的項目一樣，文章直接為富文本格式，圖檔的父級标簽已經設定了text-align:center的居中屬性。如果你的文章内容是直接調用第三方的，那麼你可以在上面的javascript代碼中添加相應的處理語句即可。