WebView加载css样式

作者: 任振铭 | 来源:发表于2018-04-16 12:49 被阅读643次

(创建于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属性前,先判断一下。

相关文章

  • WebView加载css样式

    (创建于2016/11/8) 1.在assets中创建资源文件content.css,文件内容如下(这只是个示例,...

  • WebView加载CSS样式

    当加载一个网页后,想对其进行样式的修改,可以使用WebView.loadUrl加载CSS样式文件。 在Raw目录下...

  • web前端入门到实战:css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import...

  • 关于CSS

    CSS 加载方式 css引用方式分为以下三种: 外部样式 内部样式 内联样式 外部样式 外部式css样式就是把cs...

  • iOS WebView加载本地js、css文件

    iOS WebView加载本地js、css文件 思路:对html进行操作,然后webView loadHtml 将...

  • CSS基础理解

    CSS基础理解 一、CSS 加载方式有几种 CSS可以通过使用外部样式表、内部样式表、内联样式来使用。 外部样式表...

  • CSS基础与选择器

    一、CSS加载方式 外部样式表(推荐) 通过 在html中引入CSS: 通过@import引入样式,放入CSS中,...

  • CSS基础与选择器

    CSS加载方式有几种? 外部样式表(推荐) 通过 引入外部css 通过@import引入样式,放入CSS中(后面一...

  • iOS webView 加载本地html 静态资源的路径问题

    iOS中webView加载本地html、js、css、image的路径问题 将html、css、js、image等...

  • 选择器的优先级

    影响优先级的因素:加载顺序:html和css都是从上到下加载,当样式起冲突以后,后面的css样式会覆盖前面的。注意...

网友评论

    本文标题:WebView加载css样式

    本文链接:https://www.haomeiwen.com/subject/riaskftx.html