本文主要說的是Web中圖片根據(jù)手機(jī)屏幕大小自適應(yīng)居中顯示，圖片自適應(yīng)兩種常見情況解決方案。開始吧

在做配合手機(jī)客戶端的Web wap頁面時(shí)，發(fā)現(xiàn)文章對(duì)圖片顯示的需求有兩種特別重要的情況，一是對(duì)于圖集，這種文章只需要左右滑動(dòng)瀏覽，最好的體驗(yàn)是讓圖片縮放顯示在屏幕有效范圍內(nèi)，防止圖片太大導(dǎo)致用戶需要滑動(dòng)手指移動(dòng)圖片來查看這種費(fèi)力氣的事情，用戶體驗(yàn)大大降低。二是圖文混排的文章，圖片最大寬度不超過屏幕寬度，高度可以auto。這兩種情況在項(xiàng)目中很常見。另外，有人說做個(gè)圖片切割工具，把圖片尺寸比例都設(shè)定為統(tǒng)一的大小，但即使這樣，面對(duì)各種大小的移動(dòng)設(shè)備屏幕，也是無法適用一個(gè)統(tǒng)一方案就能解決得了的。而且如果需求太多，那服務(wù)器上得存多少份不同尺寸的圖片呢？顯示不太符合實(shí)際。

下面是圖集類型，需求方要求圖片高寬都保持在手機(jī)可視視野范圍，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>

注意：測(cè)試中發(fā)現(xiàn)安卓4.0+的系統(tǒng)對(duì)window.screen.width屬性支持的不好，很多情況在首次加載時(shí)返回的屏幕像素不正確。本人的安卓2.3.3系統(tǒng)測(cè)試通過，支持該屬性。據(jù)說，這是安卓系統(tǒng)的bug，可以通過setTimeout設(shè)置延時(shí)時(shí)間來解決這個(gè)問題。不過，這個(gè)方法，本人怎么測(cè)試都行不通。所以干脆還是另尋高明吧。發(fā)現(xiàn)window.innerWidth可以擔(dān)此重任，沒有發(fā)現(xiàn)兼容問題，ok。



下面是，第二種情況，圖文并茂的文章類型。這時(shí)候只對(duì)圖片寬度和手機(jī)寬度適應(yīng)有要求，對(duì)高度不做限制，相對(duì)容易些。
改造上面的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(){//限制，只對(duì)寬高都大于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)然了，前提是像我的項(xiàng)目一樣，文章直接為富文本格式，圖片的父級(jí)標(biāo)簽已經(jīng)設(shè)定了text-align:center的居中屬性。如果你的文章內(nèi)容是直接調(diào)用第三方的，那么你可以在上面的javascript代碼中添加相應(yīng)的處理語句即可。

總結(jié)

以上是生活随笔為你收集整理的移动Web开发图片自适应两种常见情况解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。