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顯示沖突，還不得而知，也希望有牛人能給予解答。