android html 与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显示冲突，还不得而知，也希望有牛人能给予解答。

 

转载于:https://www.cnblogs.com/xilinch/p/4313467.html