Android WebView 加載CSS文件顯示富文本

應用場景:

通過Web端編寫文章,為了顯示上的美觀,都會加上一些標簽砾嫉,形成一個H5文本。

服務器返回的是H5文本內(nèi)容窒篱,里面還有Html標簽焕刮。Android客戶端需要將這些內(nèi)容加載出來,采用WebView去加載墙杯,除此之外济锄,還要求客戶端定義一套樣式去渲染。

css內(nèi)容:


@charset"UTF-8";

@font-face {

font-family:"opensans";

src: url("fonts/opensans.ttf");

}

img,object,video,embed {

max-width:100% !important;

width:auto;

height:auto;

vertical-align:middle;

border:0;

}

html, body {

background-color:white;

text-align:justify;

text-justify:distribute-all-lines;

font-size:16px  !important;

line-height:1.5;

color: #4a4a4a;

}

a:link{

text-decoration: none;

color:#2B93F6

}

WebView渲染內(nèi)容:


//articleContent是帶html標簽的文章內(nèi)容霍转,作者采用的是Kotlin編碼

val sb = StringBuilder()

sb.append("<HTML><HEAD><LINK href=\"article.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>")

sb.append(articleContent+"")

sb.append("</body></HTML>")

webView.loadDataWithBaseURL("file:///android_asset/", sb.toString(),"text/html","utf-8",null)

注意:

一般來說不修改WebView的默認配置荐绝,useWideViewPort和loadWithOverviewMode的屬性都是false。

useWideViewPort的值決定了是否允許WebView使用 <viewport> 標簽避消,用于屏幕自適應低滩。默認值是false,頁面布局的寬度被一直設置為 CSS 中控制的 WebView 的寬度岩喷,所以想讓本地的CSS起作用恕沫,那么這個值就不能設置為true;

loadWithOverviewMode的作用是纱意,當頁面寬度大于WebView寬度時婶溯,縮小使頁面寬度等于WebView寬度,設置為true之后頁面寬度有可能會超過手機屏幕。所以沒有特定要求迄委,不要將這個值設置為true褐筛。


settings.useWideViewPort =false

settings.loadWithOverviewMode =false

兩者同時設置為false能達到最優(yōu)的顯示效果,這也是源碼默認的設定值叙身。

查看更多WebView設置渔扎,可看:

Webview的奇技淫巧-總結(jié)篇 - 風離紫竹zhangqiang的博客 - CSDN博客

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市信轿,隨后出現(xiàn)的幾起案子晃痴,更是在濱河造成了極大的恐慌,老刑警劉巖财忽,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件倘核,死亡現(xiàn)場離奇詭異,居然都是意外死亡即彪,警方通過查閱死者的電腦和手機笤虫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祖凫,“玉大人琼蚯,你說我怎么就攤上這事』菘觯” “怎么了遭庶?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長稠屠。 經(jīng)常有香客問我峦睡,道長,這世上最難降的妖魔是什么权埠? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任榨了,我火速辦了婚禮,結(jié)果婚禮上攘蔽,老公的妹妹穿的比我還像新娘龙屉。我一直安慰自己,他們只是感情好满俗,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布转捕。 她就那樣靜靜地躺著,像睡著了一般唆垃。 火紅的嫁衣襯著肌膚如雪五芝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天辕万,我揣著相機與錄音枢步,去河邊找鬼沉删。 笑死,一個胖子當著我的面吹牛醉途,可吹牛的內(nèi)容都是我干的矾瑰。 我是一名探鬼主播,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼结蟋,長吁一口氣:“原來是場噩夢啊……” “哼脯倚!你這毒婦竟也來了渔彰?” 一聲冷哼從身側(cè)響起嵌屎,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎恍涂,沒想到半個月后宝惰,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡再沧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年尼夺,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片炒瘸。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡淤堵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出顷扩,到底是詐尸還是另有隱情拐邪,我是刑警寧澤,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布隘截,位于F島的核電站扎阶,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏婶芭。R本人自食惡果不足惜东臀,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望犀农。 院中可真熱鬧惰赋,春花似錦、人聲如沸呵哨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽仇穗。三九已至流部,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間纹坐,已是汗流浹背枝冀。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工舞丛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人果漾。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓球切,卻偏偏與公主長得像,于是被迫代替她去往敵國和親绒障。 傳聞我的和親對象是個殘疾皇子吨凑,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

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