Android WebView 加载html片段,会存在css和js缺失问题,导致文字和图片的大小显示出现问题:
1、文字显示太小
2、图片显示太大,超出屏幕宽度
3、通过补全html,添加<style>对字体css和图片css进行设置</style>,会存在文字重叠问题
为了解决上面的问题,需要对html代码判断进行解析并修改,所以就使用到 Jsoup。
//针对<p><span><img>标签进行处理
Document doc_Dis = Jsoup.parse("html片段字符串");//获取Document对象
Elements ele_Img = doc_Dis.getElementsByTag("img");//获取所有<img>标签元素
Elements ele_P = doc_Dis.getElementsByTag("p");//获取所有<p>标签元素
Elements ele_Span = doc_Dis.getElementsByTag("span");//获取所有<span>标签元素
if (ele_Img.size() != 0){
for (Element e_Img : ele_Img) {
e_Img.attr("style", "width:100%;height:auto;border-radius:3vw;");//替换<img>中style值
}
}
if (ele_P.size() != 0) {
for (Element e_P : ele_P) {
e_P.attr("style", "font-size:5vw;");
}
}
if (ele_Span.size() != 0) {
for (Element e_Span : ele_Span) {
String styleStr = e_Span.attr("style");//获取<span>中style值
String[] strings = styleStr.split(";");
for (int i=0;i<strings.length;i++) {
if (strings[i].contains("font-size")) {
strings[i] = "font-size:5vw";
break;
}
}
e_Span.attr("style", StringUtil.join(strings,";"));
}
}
String newHtml = doc_Dis.toString();