移動Web中圖片自適應(yīng)的兩種JavaScript解決方法
本文主要說的是Web中圖片根據(jù)手機屏幕大小自適應(yīng)居中顯示,圖片自適應(yīng)兩種常見情況解決方案。開始吧
在做配合手機客戶端的Web wap頁面時,發(fā)現(xiàn)文章對圖片顯示的需求有兩種特別重要的情況,一是對于圖集,這種文章只需要左右滑動瀏覽,最好的體驗是讓圖片縮放顯示在屏幕有效范圍內(nèi),防止圖片太大導(dǎo)致用戶需要滑動手指移動圖片來查看這種費力氣的事情,用戶體驗大大降低。二是圖文混排的文章,圖片最大寬度不超過屏幕寬度,高度可以auto。這兩種情況在項目中很常見。另外,有人說做個圖片切割工具,把圖片尺寸比例都設(shè)定為統(tǒng)一的大小,但即使這樣,面對各種大小的移動設(shè)備屏幕,也是無法適用一個統(tǒng)一方案就能解決得了的。而且如果需求太多,那服務(wù)器上得存多少份不同尺寸的圖片呢?顯示不太符合實際。
下面是圖集類型,需求方要求圖片高寬都保持在手機可視視野范圍,js代碼列在下面:
<script type="text/javascript"> $(function(){ var imglist =document.getElementsByTagName("img"); //安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系統(tǒng)支持 /* 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>
注意:測試中發(fā)現(xiàn)安卓4.0+的系統(tǒng)對window.screen.width屬性支持的不好,很多情況在首次加載時返回的屏幕像素不正確。本人的安卓2.3.3系統(tǒng)測試通過,支持該屬性。據(jù)說,這是安卓系統(tǒng)的bug,可以通過setTimeout設(shè)置延時時間來解決這個問題。不過,這個方法,本人怎么測試都行不通。所以干脆還是另尋高明吧。發(fā)現(xiàn)window.innerWidth可以擔(dān)此重任,沒有發(fā)現(xiàn)兼容問題,ok。
下面是,第二種情況,圖文并茂的文章類型。這時候只對圖片寬度和手機寬度適應(yīng)有要求,對高度不做限制,相對容易些。
改造上面的javascript代碼,如下:
<script type="text/javascript"> $(function(){ var imglist =document.getElementsByTagName("img"); //安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系統(tǒng)支持 var _width; doDraw(); window.onresize = function(){ //捕捉屏幕窗口變化,始終保證圖片根據(jù)屏幕寬度合理顯示 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函數(shù),是捕捉屏幕窗口變化,始終保證圖片根據(jù)屏幕寬度合理顯示。當(dāng)然了,前提是像我的項目一樣,文章直接為富文本格式,圖片的父級標(biāo)簽已經(jīng)設(shè)定了text-align:center的居中屬性。如果你的文章內(nèi)容是直接調(diào)用第三方的,那么你可以在上面的javascript代碼中添加相應(yīng)的處理語句即可。
相關(guān)文章
JavaScript獲取XML數(shù)據(jù)附示例截圖
這篇文章主要介紹了JavaScript獲取XML數(shù)據(jù)的方法,需要的朋友可以參考下2014-03-03javascript 實現(xiàn)父窗口引用彈出窗口的值的腳本
javascript 實現(xiàn)父窗口引用彈出窗口的值的腳本...2007-08-08Underscore.js 的模板功能介紹與應(yīng)用
Underscore是一個非常實用的JavaScript庫,提供許多編程時需要的功能的支持,他在不擴展任何JavaScript的原生對象的情況下提供很多實用的功能,需要了解的朋友可以詳細(xì)參考下2012-12-12