您的位置：首页 > 移动开发

Android下WebView的图片适配加载与文字自动换行处理

2017-01-13 18:15 1136 查看

        相信各位在Android开发中使用WebView加载页面的时候,或多或少会遇到一些网页适配的问题,例如图片过大或者是单行文字过长, 导致网页可以左右拖动,使自己加载出来的网页显得非常的low,下面介绍一种简单的方法,解决简单网页的适配问题.
        步骤1.此方法使用前提
                  ①使用此方法之前,传入WebView的html字符串不能拥有<html>标签和<header>标签,如果有则根据实际情况进行处理后再使用本方法.
                  ②准备好字符串body,格式为<body>...</body>
       步骤2.css字符串编写

String css = "<style type=\"text/css\"> img {" +
"width:100%;" +//限定图片宽度填充屏幕
"height:auto;" +//限定图片高度自动
"}" +
"body {" +
"margin-right:15px;" +//限定网页中的文字右边距为15px(可根据实际需要进行行管屏幕适配操作)
"margin-left:15px;" +//限定网页中的文字左边距为15px(可根据实际需要进行行管屏幕适配操作)
"margin-top:15px;" +//限定网页中的文字上边距为15px(可根据实际需要进行行管屏幕适配操作)
"font-size:40px;" +//限定网页中文字的大小为40px,请务必根据各种屏幕分辨率进行适配更改
"word-wrap:break-word;"+//允许自动换行(汉字网页应该不需要这一属性,这个用来强制英文单词换行,类似于word/wps中的西文换行)
"}" +
"</style>";

☆请注意,此处设置的css代码,会遵循css优先级规则,也就是说,在某些网页中个别属性不会起作用。对于这种情况,请仔细阅读网页代码,参照性地进行css代码编写,如对css不了解......去学学吧,不是很难,只是学一点儿css的话比Android的布局文件编写学起来快。
步骤3.拼接html串,并传递给webview进行展示

html = "<html><header>" + css + "</header>" + html + "</html>";
mTotalWebviewWebview.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);

步骤4.最后调整

为webview设置自适应屏幕

WebSettings webSettings = webview.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);

相信可以解决你的问题

特别感谢:http://blog.csdn.net/SoulOfAndroid/article/details/47701805

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航