android html 与webview属性从冲突

简介: 在最近的项目开发中,使用webview加载html页面,这样可以节省大量页面开发的时间,同时也可加快项目进度。 我们需求是需要显示商品评论,页面设计如下:   调用android代码,对于webview的设置如下: webView.

在最近的项目开发中,使用webview加载html页面,这样可以节省大量页面开发的时间,同时也可加快项目进度。

我们需求是需要显示商品评论,页面设计如下:

 

调用android代码,对于webview的设置如下:

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setDefaultTextEncodingName("UTF-8");

在展示数据的时候,出现问题。实际效果如下:

 

这里物流速度和产品质量无法显示.

html的关键代码如下:

switch (jsonForCreat.DATA[i].QUALITYLEVEL){
                            case '1':
                                $("#q"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 515px");
                                break;
                            case '2':
                                $("#q"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 535px");
                                break;
                            case '3':
                                $("#q"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 555px");
                                break;
                            case '4':
                                $("#q"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 575px");
                                break;
                            case '5':
                                $("#q"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 595px");
                                break;
                            default :
                                $("#q"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 595px");
                                break;
                        }
                        switch (jsonForCreat.DATA[i].SPEEDLEVEL){
                            case '1':
                                $("#s"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 515px");
                                break;
                            case '2':
                                $("#s"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 535px");
                                break;
                            case '3':
                                $("#s"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 555px");
                                break;
                            case '4':
                                $("#s"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 575px");
                                break;
                            case '5':
                                $("#s"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 595px");
                                break;
                            default :
                                $("#s"+jsonForCreat.DATA[i].KEY_ID).css("background-position", "0px 595px");
                                break;
                        }

 

在仔细对比所有的数据格式无误,对比ios,发现:

同样的html页面,同样的数据,这个页面在ios上显示正常,在android上就是无法显示物流速度和产品质量的评价星数。

最后在比对webview设置的时候,将webview属性 

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

注释掉以后,发现显示正常了,

 

查询资料得知:

SINGLE_COLUMN:把所有内容放到WebView组件等宽的一列中。

这个属性至于为何与html显示冲突,还不得而知,也希望有牛人能给予解答。

 

目录
相关文章
|
2月前
|
移动开发 JavaScript Java
关于Android中如何过滤HTML标签
关于Android中如何过滤HTML标签
46 0
|
7天前
|
前端开发 JavaScript
html图像属性的高级用法
在HTML中,通过结合CSS、JavaScript及其他HTML元素,可以实现图像属性的高级用法,例如响应式图像、懒加载、图像映射、CSS滤镜、SVG图像、图像作为背景以及使用JavaScript动态更改图像。
|
7天前
|
前端开发
html图像属性详解
在 HTML 中,使用 `<img>` 标签插入图像。主要属性包括:`src` 指定图像路径,`alt` 提供替代文本,`width` 和 `height` 设置尺寸,`title` 显示额外信息,`loading` 控制加载方式(如 `lazy` 延迟加载),`class` 和 `style` 用于样式化,`usemap` 定义图像映射,`ismap` 表示服务器端映射。这些属性可组合使用以实现复杂效果。
|
12天前
|
存储 前端开发 UED
HTML 属性新手注意点
在学习和使用HTML属性时,新手应注意以下几点,以确保代码的有效性和可维护性:1. 确保属性名称正确无误;2. 使用引号包围属性值;3. 避免内联样式,集中管理CSS;4. 使用语义化标签;5. 添加`alt`和`title`属性提高可访问性;6. 避免重复的ID;7. 利用`data-*`属性存储自定义数据;8. 测试属性在各浏览器中的兼容性;9. 合理使用`target`属性,注意安全;10. 保持代码简洁。遵循这些注意事项,有助于编写高质量的HTML代码。
|
24天前
HTML标记 和标记的属性
【8月更文挑战第28天】HTML标记 和标记的属性。
24 1
|
25天前
HTML元素(HTML Elements)的属性
【8月更文挑战第27天】HTML元素(HTML Elements)的属性。
24 2
|
29天前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
33 4
|
20天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
42 0
|
20天前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
22 0
|
27天前
|
移动开发 前端开发 JavaScript
HTML5 中 `id` 属性和 `class` 属性的区别
【8月更文挑战第24天】
18 0