Android WebView内容宽度自适应_点击全屏按钮后,宽度拉宽了,高度也高了 webview-CSDN博客

本文链接：https://blog.csdn.net/u011692041/article/details/51063540

我们平常在项目中有可能会遇到网页的内容是通过json数据传递到app上面用WebView来显示的,这时候我们通常都要调整内容的总宽度不超过父容器的宽度,这样子用户可以不用左右滑动就可以看到全部的内容.但是当我遇到这个问题的时候,我是想方设法想达到这个目的,用过WebView里面的很多方法,包括:

1.第一种网上的方法(ps:失败)

WebSettings settings = webView.getSettings();
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
LayoutAlgorithm是一个枚举用来控制页面的布局，有三个类型：

1.NARROW_COLUMNS：可能的话使所有列的宽度不超过屏幕宽度

2.NORMAL：正常显示不做任何渲染

3.SINGLE_COLUMN：把所有内容放大webview等宽的一列中

用SINGLE_COLUMN类型可以设置页面居中显示，页面可以放大缩小，但这种方法不怎么好，有时候会让你的页面布局走样而且我测了一下，只能显示中间那一块，超出屏幕的部分都不能显示。

2.第二种(失败)

//设置加载进来的页面自适应手机屏幕
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

其他的一些方法我也试过了,但是都没达到预期的效果

后来我自己想到了可不可以通过css或者js来控制内容的显示效果,于是使用了css来实现我需要的功能:

3.第三种(成功)

body{
word-wrap:break-word;
font-family:Arial;
}

通过css还可以改变文字的颜色等外观效果,比如:

*{
color:#FF0000;
}

所以这里写个简单的博客给coder,如果其他方法不行的话,可以试试博主这个方法哦

    /**
     * 离线加载的网页内容要加上的一些网页源码
     * 博主这里返回的网页源码是指包含body的内容的,所以这些网页的头和一些css样式可以直接拼接
     */
    private String codePrefixOne = "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">" +
            "<html>" +
            "<head>" +
            "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=\">" +
            "<style type=\"text/css\">";

    private String codePrefixTwo = "</style>" + "</head>" + "<body></body>" + "</html>";

    private String codeSubfix = "</body></html>";

再次声明博客这里返回的数据是只有body内容的,所以博主进行css控制的时候只需要在body前面和后面进行拼接就行了,要拼接的字符串已经在上面给出,但是关键的是下面这段

String webData = codePrefixOne + "*{color:" + "#123456" + ";}body{word-wrap:break-word;font-family:Arial}" + codePrefixTwo + detailStory.getBody() + codeSubfix;

这里就可以拼接成要给完整的html源码了,可以看到也是在这里把关键的css拼接上去的

还有一种情况就是返回的是完整的html源码,我该如何添加css样式,其实有很多人问过我,这个问题对于一个稍微水平高一点的程序员都不是事啊,你无非不就是想把你的css这段代码插入到网页源码中的<style></style>这对标签中么？这是字符串操作的基础,相信不是什么难事.所以这里博客也不会给出代码思路已经给出