最近兩次應(yīng)運(yùn)eclipse + genymotion +sdk Manager開發(fā)android應(yīng)用都很大程度的運(yùn)用了Webview桥帆，一次是利用webview顯示google離線地圖并用google map api提供的一些接口控制地圖縮放丛晦，定位洼怔。最近一次是模擬制作寬帶測試的app。
用過webview的同學(xué)應(yīng)該都知道又官，直接把一個(gè)html頁面通過webview載入的話會(huì)發(fā)現(xiàn)延刘，頁面內(nèi)元素的大小無法和webview容器完美兼容，webview出現(xiàn)左右六敬、上下滾動(dòng)條影響頁面美觀和功能碘赖。
下面，我拿最近利用echarts制作的外构，類似寬帶測試的app簡單的分享一下如何在js端和android共同配置普泡，讓自己的頁面載入webview后達(dá)到自己想要的效果。
首先审编，我們建立一個(gè)android項(xiàng)目撼班，在AndroidManifest.xml中定義一個(gè)主頁，并配置相應(yīng)的權(quán)限垒酬。
"http://schemas.android.com/apk/res/android"
package="com.zjtelecom.kdcs"
android:versionCode="1"
android:versionName="1.0">
"@drawable/telecom"android:label="@string/app_name">
"com.zjtelecom.kdcs.index"android:label="@string/app_name">
"android.intent.action.MAIN"/>
"android.intent.category.LAUNCHER"/>
其次权烧，建立一個(gè)activity,我的項(xiàng)目中是index.java,對(duì)應(yīng)的建立一個(gè)xml文件用來編寫webview控件和頁面布局。
文件：index.java代碼片段
文件：main_xx.xml代碼片段
這里主要講一下index.java中關(guān)于webview的一些配置伤溉。
WebSettingsmWebSettings= webV.getSettings();
mWebSettings.set;
mWebSettings.set;
mWebSettings.setUseWideViewPort(false);
mWebSettings.setLoadWithOverviewMode(false);
mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webV.setOverScrollMode(1);
webV.setWebChromeClient(newMyWebChromeClient());
webV.addJavascriptInterface(newDemo;
設(shè)置支持js，去滾動(dòng)條等基本屬性妻率。
webV.setWebViewClient(newWebViewClient(){
//監(jiān)聽webview加載狀態(tài)乱顾，加載完成后，調(diào)用html頁面的js函數(shù)設(shè)置外部DIV的寬和高度宫静。
publicvoidonPageFinished(WebView view,String url){
DisplayMetrics dm =newDisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
intdevWidth = dm.widthPixels;
intdevHeight = dm.heightPixels;
floatdenisty = dm.density;
intdenistyDpi= dm.densityDpi;
intdivWidth = (int) (devWidth/denisty);
intdivHeight = (int) (devHeight/denisty);
if(denistyDpi== 120)
divHeight = divHeight - 38;
if(denistyDpi== 160)
divHeight = divHeight - 50;
if(denistyDpi> 240)
divHeight = divHeight - 76;
//設(shè)置地圖顯示DIV尺寸適應(yīng)手機(jī)大小webV.loadUrl("; } });
//最后載入你想要載入的頁面
webV.loadUrl("載入的html頁面的url地址走净，可以放在本地資源文件也可以是http://形式的url");
//接著加入這兩個(gè)接口的的實(shí)現(xiàn)
這里是根據(jù)設(shè)備的dpi計(jì)算html文件中最外圍的DIV或者空間的最大寬度和高度券时，因?yàn)槊總€(gè)設(shè)備的分辨率不同，屏幕尺寸不同伏伯，為了使用webview加載的頁面兼容所以做了個(gè)簡單的計(jì)算橘洞，因?yàn)楣P者身邊沒有做android的人，本身對(duì)于android開發(fā)的應(yīng)用需求也不是很多说搅，一直沒有找到其他更好的解決方案炸枣，所以就通過自己計(jì)算屏幕分辨率和寬、高的方式來應(yīng)用webview弄唧，如果你有更好的解決方案适肠，麻煩告知。
到這里候引，android的部分就差不多了侯养，下面來看看html部分的主要代碼。
圖中有一個(gè)setDivWidthHeight的函數(shù)澄干，就是上面android頁面中發(fā)起的調(diào)用webV.loadUrl(""將android計(jì)算出的屏幕寬度和高度發(fā)送給js逛揩，再用js控制頁面ID=main的DIV的寬度和高度，這樣就把頁面大小定下來了麸俘，至于圖中儀表盤的功能實(shí)現(xiàn)和echarts的應(yīng)用辩稽，可以查看我上次分享的學(xué)習(xí)分享，echarts模擬寬帶測速效果附Demo演示地址＜碴搂誉！鏈接地址。
最后静檬，整個(gè)html頁面的功能都在div id=main這個(gè)div元素內(nèi)完成炭懊，就能確保無論是什么樣的設(shè)備打開我的app應(yīng)用，都能通過webview完美的把整個(gè)html5的內(nèi)容呈現(xiàn)出來拂檩，代碼有點(diǎn)雜亂侮腹，守環(huán)境配置影響不能把所有的代碼貼出來，有需要的可以私信我稻励。
附:自己做了個(gè)公眾號(hào)父阻，湊湊微商的熱鬧。喜歡的朋友可以關(guān)注望抽，購買加矛！買到不滿意的東西可以加我微信：Zjgfcwang要求退款。
