Android WebView設(shè)置圖片自適應(yīng)屏幕寬度

<meta charset="utf-8">

在開發(fā)中蹲坷,有時候我們需要加載html中的數(shù)據(jù)绿聘,當(dāng)html中的各個元素寬高都已經(jīng)設(shè)置好了的情況下爬凑,我們可以直接用WebView加載级解,但是也有時候html各個標(biāo)簽的寬高是不正常的冒黑,特別是圖片。以下介紹WebView設(shè)置加載的網(wǎng)絡(luò)圖片自適應(yīng)寬高的3種方法勤哗,以作記錄:
  • 方法一抡爹、WebView加載url

該方法使用js來設(shè)置,在Webview的setWebViewClient()方法中WebViewClient在加載完網(wǎng)頁后執(zhí)行一個JavaScript方法芒划,這個JavaScript方法將所有網(wǎng)頁中圖片的寬度設(shè)置為屏幕顯示寬度冬竟。

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                String javascript = "javascript:function ResizeImages() {" +
                        "var myimg,oldwidth;" +
                        "var maxwidth = document.body.clientWidth;" +
                        "for(i=0;i <document.images.length;i++){" +
                        "myimg = document.images[i];" +
                        "if(myimg.width > maxwidth){" +
                        "oldwidth = myimg.width;" +
                        "myimg.width = maxwidth;" +
                        "}" +
                        "}" +
                        "}";
                String width = String.valueOf(ScreenUtils.widthPixels(mContext));
                view.loadUrl(javascript);
                view.loadUrl("javascript:ResizeImages();");
            }

  • 方法二欧穴、WebView直接加載HTML字符串(使用java.lang.String類中的replace()方法)

這種情況我們有時候也會碰到,HTML字符串直接保存在數(shù)據(jù)庫中诱咏,后臺直接將其返回給我們苔可,我們需要將其加載到WebView中,該情況下我們可以直接使用java.lang.String中的replace方法來替換HTML中的對應(yīng)字符串就行袋狞,如下所示:
//后臺返回給我們的html字符串

String content = ".....<........>......</......>.....";

設(shè)置寬高自適應(yīng)方法

content = content.replace("<img", "<img style="max-width:100%;height:auto");
webView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);

  • 方法三焚辅、WebView直接加載HTML字符串(使用Jsoup)

Jsoup解析html字符串是非常方便的,他的中文版官網(wǎng)為Jsoup中文版苟鸯,其使用方法這里面介紹的非常詳細(xì)同蜻,就不多說了,我就直接吧代碼粘貼出來

    /**
     * 設(shè)置img標(biāo)簽下的width為手機屏幕寬度早处,height自適應(yīng)
     *
     * @param data html字符串
     * @return 更新寬高屬性后的html字符串
     */
    private String getNewData(String data) {
        Document document = Jsoup.parse(data);

        Elements pElements = document.select("p:has(img)");
        for (Element pElement : pElements) {
            pElement.attr("style", "text-align:center");
            pElement.attr("max-width", String.valueOf(ScreenUtils.getScreenWidth(getContext()) + "px"))
                    .attr("height", "auto");
        }
        Elements imgElements = document.select("img");
        for (Element imgElement : imgElements) {
            //重新設(shè)置寬高
            imgElement.attr("max-width", "100%")
                    .attr("height", "auto");
            imgElement.attr("style", "max-width:100%;height:auto");
        }
        Log.i("newData:", document.toString());
        return document.toString();
    }

作者:WonderSky_HY
鏈接:http://www.reibang.com/p/d2acd79c3d32
來源:簡書
著作權(quán)歸作者所有湾蔓。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處砌梆。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末默责,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子咸包,更是在濱河造成了極大的恐慌桃序,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件烂瘫,死亡現(xiàn)場離奇詭異媒熊,居然都是意外死亡,警方通過查閱死者的電腦和手機坟比,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門芦鳍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人葛账,你說我怎么就攤上這事柠衅。” “怎么了籍琳?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵茄茁,是天一觀的道長。 經(jīng)常有香客問我巩割,道長裙顽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任宣谈,我火速辦了婚禮愈犹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己漩怎,他們只是感情好勋颖,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著勋锤,像睡著了一般饭玲。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上叁执,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天茄厘,我揣著相機與錄音,去河邊找鬼谈宛。 笑死次哈,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的吆录。 我是一名探鬼主播窑滞,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼恢筝!你這毒婦竟也來了哀卫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤撬槽,失蹤者是張志新(化名)和其女友劉穎聊训,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體恢氯,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年鼓寺,在試婚紗的時候發(fā)現(xiàn)自己被綠了勋拟。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡妈候,死狀恐怖敢靡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情苦银,我是刑警寧澤啸胧,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站幔虏,受9級特大地震影響纺念,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜想括,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一陷谱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦烟逊、人聲如沸渣窜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽乔宿。三九已至,卻和暖如春访雪,著一層夾襖步出監(jiān)牢的瞬間详瑞,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工冬阳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蛤虐,地道東北人。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓肝陪,卻偏偏與公主長得像驳庭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子氯窍,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容