WebView的各種坑，今天又讓我發(fā)現(xiàn)一個。

一、懵逼

最近公司項目中新聞模塊需要用WebView來加載，而且服務(wù)端返回的是String類型的html代碼，包含各種標(biāo)簽，各種轉(zhuǎn)義符，一開始直接用loadDataWithBaseURL()加載的時候，出現(xiàn)各種<、>，直接懵逼了，后面一查，只是因為轉(zhuǎn)義符的關(guān)系，那直接用String類的replace()方法替換成對應(yīng)的<、>，就搞定了。

但是當(dāng)新聞里面的圖片大于屏幕寬度時，會出現(xiàn)橫向滾動條，圖片也只顯示部分，向右滾動屏幕才能看到剩余的圖片內(nèi)容，這樣極不方便，也不美觀。

網(wǎng)上搜索了一番，有種解決方案是直接把整個WebView的綻放比例變小，適配屏幕，這樣出來的圖片是適配屏幕了，但是文字就變得非常小，完全就是把PC端網(wǎng)頁塞進手機的感覺了。

二、轉(zhuǎn)機

突然看到泡在網(wǎng)上的日子大哥的一篇文章WebView加載圖片超過屏幕大小的問題，說的是讓PC端在img標(biāo)簽里面配置一下最大寬度就可以解決了：

<style>
 
img{
 max-width:80%;
 height:auto;
}
 
</style>

三、再次懵逼

趕緊聯(lián)系服務(wù)端人員，結(jié)果被告知，這是使用某個框架做出來的效果，沒辦法修改里面的樣式，這不又再次懵逼了嗎...

四、柳暗花明又一村

程序員都是打不死的蟑螂，只要有一線希望，就要努力去實現(xiàn)自己的價值，不，保住自己的飯碗。

上面泡網(wǎng)大哥的方法，其實就是給img設(shè)置樣式。那服務(wù)端搞不定，就只能我們客戶端這邊來做了，能不能我們直接給每個img標(biāo)簽都加上最大寬度的限制呢？既然我們能把轉(zhuǎn)義符替換掉，那是不是也能用同樣的方法來加樣式呢？

五、解決方案

答案是肯定的，在我們獲取到的String類型的html代碼里面，我們已經(jīng)把轉(zhuǎn)義符replace成我們實際需要的字符，這時候我們就能取到img的標(biāo)簽了(<img>)，那只要加上如下的代碼，就可以了：

htmlData = htmlData.replace("<img", "<img style='max-width:90%;height:auto;'");

原理就是上面分析的，在每個img標(biāo)簽里面，加上最大寬度和高度的控制，最大寬度比例可以根據(jù)需要自由設(shè)置。經(jīng)過測試，暫時沒發(fā)現(xiàn)問題，如果大家有發(fā)現(xiàn)問題，或者有其它的解決方案，歡迎隨時給我留言。

PS：歡迎關(guān)注SherlockShi博客