應用場景:
通過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設置渔扎,可看: