關於設定了LayoutAlgorithm.SINGLE_COLUMN後，某些手機的webview仍然無法適配圖片的解決方案
阿新 • • 發佈：2018-12-31
為了讓web上的富文字編輯後的html能夠在手機的webview中適配顯示，基本上只要設定了LayoutAlgorithm.SINGLE_COLUMN都能夠解決（需要指定一個targetSdkVersion），但是發現某些手機，比如MX3上卻無法適配，找了很多方法都沒有效果，最終還是決定修改html頁面來解決。
首先需要認清楚html上的圖片寬高單位px並非手機解析度的畫素，有點類似dp的概率，只和視覺長度有關。在html中img的初始寬度都是根據圖片的解析度來設定的，但是在顯示的時候它的寬度值卻變成了相對標準比例的視覺寬度，比如寬度為900＊600的圖片在瀏覽器上顯示不會超過螢幕的寬度，但是在手機上，不管手機的解析度，它的視覺寬度是和瀏覽器上一樣的，所以我們為了適配手機需要對比圖片的在css中的寬度和device-width(相對瀏覽器非解析度)，如果超出了device-width就重新設定圖片的寬度。
示例程式碼：
html
<meta name="viewport" content="width=device-width, initial-scale=1" /> <script type="text/javascript" src="file:///android_asset/jquery.js"></script> <script type="text/javascript" src="file:///android_asset/handler.js"></script> <body style="background-color: #eeeeee; padding: 0 1em;" > <div style="text-align: center;">${title}</div> <hr style="border:none;border-top:1px solid #dcdcdc;border-bottom:1px solid #ffffff;" /> ${content} </body>
handler.js
javavar ww = window.innerWidth; $(function(){ $('body').css({'word-break':'break-all','width':'auto'}); $('span').css({'word-break':'break-all','width':'auto'}); }); window.onload = function() { $('img').each(function(){ var width = $(this).css("width"); var rwidth=width.substring(0, width.length-2); if(rwidth >= ww){ $(this).css("width",ww*0.9); } }); end.callback(); };
webView.addJavascriptInterface(new CallbackInterface(), "end");
webView.loadDataWithBaseURL(host, html, "text/html", "UTF_8", null);值得注意的是設定了高版本的target後，需要為end.callback新增@JavascriptInterface後js才能找到，另外loadDataWithBaseURL的第一個引數baseUrl也需要注意，如果內容中的src沒有包含host，baseUrl需要寫host，並且html中引用的js路徑也需要寫絕對路徑即file:///android_asset/jquery.js，如果內容沒有要求baseUrl就可以直接寫file:///android_asset/，這樣js路徑就可以寫相對路徑了。