简单的WebView自适应并嵌套在ScrollView里_html/css

简单的WebView自适应并嵌套在ScrollView里_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:48:25

原创

1490人浏览过

因为某种原因，我们总是需要展示一些复杂的文本，html.fromhtml()已经不能满足我们的需求，比如后台可编辑的文本在前端显示起来比较吃力，所以为了解决一些复杂的文本显示就需要用到webview。

WebView in ScrollView

我们都知道ScrollView和WebView都有滚动的效果，所以我们需要先屏蔽WebView的滚动事件。

Stack overflow讨论

<ScrollView    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:descendantFocusability="blocksDescendants" >

登录后复制

中文乱码

如果出现中文乱码，你可以这样设置

webView.loadData(body, "text/html; charset=utf-8", "utf-8");

登录后复制

Auto Scale

这时候如果后端如果传过来的不是完整的Html，而是只有body部分的内容，那么我们就需要补充并添加一些css样式来达到自适应的效果。

立即学习“前端免费学习笔记（深入）”；

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

Stack overflow讨论

WebView webView = new WebView(this);webView.setWebViewClient(new SimpleWebViewClient(title));        webView.getSettings().setDefaultTextEncodingName("utf-8");if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);} else {     webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);}webView.loadData(getHtmlData(body), "text/html; charset=utf-8", "utf-8");

登录后复制

别忘了头部的设定：

官方对自适应的最佳实践

private String getHtmlData(String bodyHTML) {    String head = "<head>" +                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +                "<style>img{max-width: 100%; width:auto; height:auto;}</style>" +                "</head>";    return "<html>" + head + "<body>" + bodyHTML + "</body></html>";}

登录后复制