WebView 內(nèi)容自適應(yīng)屏幕

轉(zhuǎn)載出處(http://www.cnblogs.com/linguanh/)

先說(shuō)下我的情況,大家可以對(duì)號(hào)入座(嫌無(wú)聊請(qǐng)?zhí)^(guò))

我的項(xiàng)目要求是這樣的漆腌,先從數(shù)據(jù)庫(kù)里面拿出來(lái)html標(biāo)簽,因?yàn)榧虞d到移動(dòng)端的網(wǎng)頁(yè)內(nèi)容是用戶在網(wǎng)頁(yè)編輯好了之后提交到服務(wù)器的阶冈,即網(wǎng)頁(yè)內(nèi)容是 b/s 交互闷尿,我在網(wǎng)頁(yè)前段編輯器里面設(shè)置了只保存編輯的 html 標(biāo)簽,即是沒(méi)有頭部和后面的女坑,形式是:


<html>
   <body>
       只保存這里的標(biāo)簽到數(shù)據(jù)庫(kù)
   </body>
</html>

移動(dòng)端有兩個(gè)activity填具,這時(shí)候是 c/s 交互了,頁(yè)面一負(fù)責(zé)加載前置數(shù)據(jù)堂飞,例如一張封面圖之類的灌旧,然后用戶點(diǎn)擊進(jìn)入webView主體,我上面說(shuō)了绰筛,我的目標(biāo)html標(biāo)簽是保存到db的枢泰,所以我在第一個(gè)頁(yè)面的時(shí)候就把db里面的html下載保存到內(nèi)存了,String即可铝噩,用戶點(diǎn)擊時(shí)衡蚂,跳轉(zhuǎn)傳遞。看到這里毛甲,相信你知道我是加載到webView的了年叮,沒(méi)錯(cuò),就是組合玻募,再load只损。注意了,我這里并不是直接加在一個(gè)鏈接七咧,不是 webView.loadUrl() 是組合好 html 后再使用 loadDataWithBaseUrl跃惫。

說(shuō)下標(biāo)簽不同的影響(很重要,因?yàn)槟承┓椒▽?duì)某些表情有用)

通常艾栋,我們加載后超出屏幕寬度的一般是 img 或者 video 標(biāo)簽或者文字爆存,這類標(biāo)簽可以使用css 或者 網(wǎng)上盛行的三個(gè)設(shè)置做到適配,這三個(gè)盛行的設(shè)置是:


setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);

我先說(shuō)明蝗砾,這三個(gè)設(shè)置不一定有效先较,android 4.4 后就很可能沒(méi)效,為什么是很可能悼粮?你都不敢確定闲勺?上面說(shuō)過(guò),和標(biāo)簽及其設(shè)置有關(guān)系矮锈。如果出現(xiàn)了 table 這種標(biāo)簽霉翔,即 table 適配屏幕,很可能css都失效苞笨,怎么辦债朵?,我就是遇到了它瀑凝,所以有了這篇文章序芦。

三種解決方法**(重點(diǎn))。針對(duì)我的自己情況粤咪,自己組合html顯示的谚中。

法一:使用 Css 適配,它比上面的三種 setting 有效寥枝,對(duì)img 和video 絕壁有效宪塔,我給出個(gè)例子:

"<style>"+
 "img{" +
        "max-width:100%;" +
         "height:auto}" +
 
 "video{"+
            "max-width:100%;"+
             "height:auto}"+
  "</style>" +

法二:使用三種setting設(shè)置:


setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);

這種方法的失敗可能性很大,但是囊拜,也可以一試

法三:使用javaScript腳本某筐,暫時(shí)給它定義成功率是 100%(因?yàn)槲矣盟鼪](méi)失效過(guò))我這里給一個(gè)例子,例如我上面說(shuō)到的 table冠跷。

"<script type=\"text/javascript\">"
"var tables = document.getElementsByTagName('table');"
// 找到table標(biāo)簽
"for(var i = 0; i<tables.length; i++){"
+
// 逐個(gè)改變         
"tables[i].style.width = '100%';"
+
// 寬度改為100%           
"tables[i].style.height = 'auto';"   
"}"
+
"</script>"
+

看到這里南誊,你很可能會(huì)說(shuō)身诺,這和 css 有什么區(qū)別?區(qū)別可大了抄囚,我使用 css 改變table的失敗了霉赡,使用它成功了。
說(shuō)明一下: 上面使用 js 腳步適配幔托,請(qǐng)寫到 內(nèi)容加載之后穴亏,即是 <body> 內(nèi)容 <寫后面></body>,為什么呢重挑?有基礎(chǔ)的人都知道迫肖,html 是解析性語(yǔ)言,從上到下攒驰,你要先加載好 html 再使用 js 改變,除非js 包在函數(shù)里面故爵。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末玻粪,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子诬垂,更是在濱河造成了極大的恐慌劲室,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,376評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件结窘,死亡現(xiàn)場(chǎng)離奇詭異很洋,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)隧枫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門喉磁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人官脓,你說(shuō)我怎么就攤上這事协怒。” “怎么了卑笨?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,966評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵孕暇,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我赤兴,道長(zhǎng)妖滔,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,432評(píng)論 1 283
  • 正文 為了忘掉前任桶良,我火速辦了婚禮座舍,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘艺普。我一直安慰自己簸州,他們只是感情好鉴竭,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著岸浑,像睡著了一般搏存。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上矢洲,一...
    開(kāi)封第一講書(shū)人閱讀 49,792評(píng)論 1 290
  • 那天璧眠,我揣著相機(jī)與錄音,去河邊找鬼读虏。 笑死责静,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的盖桥。 我是一名探鬼主播灾螃,決...
    沈念sama閱讀 38,933評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼揩徊!你這毒婦竟也來(lái)了腰鬼?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,701評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤塑荒,失蹤者是張志新(化名)和其女友劉穎熄赡,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體齿税,經(jīng)...
    沈念sama閱讀 44,143評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡彼硫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了凌箕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拧篮。...
    茶點(diǎn)故事閱讀 38,626評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖牵舱,靈堂內(nèi)的尸體忽然破棺而出他托,到底是詐尸還是另有隱情,我是刑警寧澤仆葡,帶...
    沈念sama閱讀 34,292評(píng)論 4 329
  • 正文 年R本政府宣布赏参,位于F島的核電站,受9級(jí)特大地震影響沿盅,放射性物質(zhì)發(fā)生泄漏把篓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評(píng)論 3 313
  • 文/蒙蒙 一腰涧、第九天 我趴在偏房一處隱蔽的房頂上張望韧掩。 院中可真熱鬧,春花似錦窖铡、人聲如沸疗锐。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,742評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)滑臊。三九已至口芍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間雇卷,已是汗流浹背鬓椭。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留关划,地道東北人小染。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像贮折,于是被迫代替她去往敵國(guó)和親裤翩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評(píng)論 2 348

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案调榄? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,757評(píng)論 25 707
  • 我的女兒岛都,25個(gè)月的小寶寶,一個(gè)早熟的小女孩兒振峻,什么都懂什么都會(huì)表達(dá),咬字清晰择份,邏輯清楚扣孟。 她特別的要強(qiáng),當(dāng)我們都...
    文科生大空翼閱讀 145評(píng)論 0 0
  • 雨斷斷續(xù)續(xù)的下 我徘徊在這 江南的雨巷中 手中握著那把 厚重的油紙傘 等待著一場(chǎng) 未命名的邂逅 也許 我會(huì)遇...
    喜歡任盈盈的小師妹閱讀 117評(píng)論 0 0
  • 關(guān)于我利诺,一位不忘初心的偽黃金分析師,N形階梯理論發(fā)現(xiàn)者剩燥。個(gè)化繁為簡(jiǎn)慢逾,綜合道德經(jīng),道氏理論灭红,江恩理論侣滩,波浪理論,纏論...
    洛克國(guó)王閱讀 1,027評(píng)論 0 0