WebView加载css样式

简介: (创建于2016/11/8)1.在assets中创建资源文件content.css,文件内容如下(这只是个示例,是修改标签的,项目中是用于加载富文本,html加载没有实验过)body,p,div,h1,h2,h3,h4,h5,h6,span{ co...

(创建于2016/11/8)

1.在assets中创建资源文件content.css,文件内容如下(这只是个示例,是修改标签的,项目中是用于加载富文本,html加载没有实验过)

body,p,div,h1,h2,h3,h4,h5,h6,span{ color:#ffffff !important; font-size:15px; background:none}

body p span{
  color:#ffffff !important;font-size:14px !important;
}

body p.MsoNormal span{
  color:#ffffff !important;font-size:14px !important;
}   

2.使用webview进行加载(str是传入的富文本)

/**
     * 修改webview样式(assets--css文件)
     * 
     * @param webview
     * @param str
     */
    public static void getWebContent(WebView webview, String str) {
        String linkCss = "<link rel=\"stylesheet\" href=\"file:///android_asset/content.css\" type=\"text/css\">";

        String body = "<html><header>" + linkCss + "</header>" + str
                + "</body></html>";

        webview.loadDataWithBaseURL(linkCss, body, "text/html", "UTF-8", null);
    }

二.1加载html网页的方式网上找到的,尚未试验,用于网页中图片过大时设置图片宽度为屏幕宽度

1. webView.getSettings().setLoadWithOverviewMode(true);
// webView.getSettings().setUseWideViewPort(true); 这句不要设置 否则第2点无效  里面的内容不会适配屏幕
2. DisplayMetrics outMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
        DecimalFormat format = new DecimalFormat("0.00");
        String formatResult = format.format((float)(outMetrics.widthPixels) / (float)420); //420为html页面的宽度
        Log.i("xxx", "scale = " + Float.valueOf(formatResult));
        //设置初始缩放大小  100%   屏幕宽度 / 网页设置的宽度
        webView.setInitialScale((int)(Float.valueOf(formatResult) *100));//39
这个方法似乎4.4之后无法使用

3.webView.setInitialScale((int)(Float.valueOf(formatResult) *100));//39
4.在css中加这个试试

在我们获取到的String类型的html代码里面,我们已经把转义符replace成我们实际需要的字符,这时候我们就能取到img的标签了( <img> ),那只要加上如下的代码,就可以了:

htmlData = htmlData.replace("<img", "<img style='max-width:90%;height:auto;'");

原理就是上面分析的,在每个img标签里面,加上最大宽度和高度的控制,最大宽度比例可以根据需要自由设置

5

jsoup设置html标签属性:

[java] view plain copy

    Elements elementImgs = detail.getElementsByTag("img");//获取所有img标签  
      
    DeviceInfo deviceInfo = DeviceUtil.getDevicesPix(BlogContentActivity.this);  
      
    for (Element img : elementImgs) {  
        img.attr("width", (int)(deviceInfo.width/deviceInfo.density) + "px");//设置width属性  
    }  


将经过处理的html加载到webview,就可以看到图片是与屏幕同宽,当然如果图片本来的大小小于屏幕宽度,就没必要进行放大了,可以在修改width属性前,先判断一下。
相关文章
|
15天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
4天前
|
前端开发 JavaScript UED
|
21天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
110 1
|
1月前
|
前端开发
【CSS】纯css3螺旋状loading加载特效
【CSS】纯css3螺旋状loading加载特效
27 4
|
30天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
40 2
|
9天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
9天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
80 1
|
2月前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。