Android與JS之間的互相呼叫互動（一）
阿新 • • 發佈：2019-01-29
Android裝置多解析度的問題
Android瀏覽器預設預覽模式瀏覽 會縮小頁面 WebView中則會以原始大小顯示
Android瀏覽器和WebView預設為mdpi。hdpi相當於mdpi的1.5倍 ldpi相當於0.75倍
三種解決方式：1 viewport屬性 2 CSS控制 3 JS控制
Android瀏覽器和WebView支援查詢當前設別密度的DOM特性
window.devicePixelRatio 同樣值有3個（0.75,1,1.5對應3種解析度）
JS中查詢裝置密度的方法
js程式碼
使用WebView控制元件 與其他控制元件的使用方法相同 在layout中使用一個<WebView>標籤
WebView不包括導航欄，位址列等完整瀏覽器功能，只用於顯示一個網頁
在WebView中載入Web頁面，使用loadUrl()
//設定WebViewClient
這個WebViewClient物件是可以自己擴充套件的，例如
Android瀏覽器預設預覽模式瀏覽 會縮小頁面 WebView中則會以原始大小顯示
Android瀏覽器和WebView預設為mdpi。hdpi相當於mdpi的1.5倍 ldpi相當於0.75倍
三種解決方式：1 viewport屬性 2 CSS控制 3 JS控制
1 viewport屬性放在HTML的<meta>中
meta中viewport的屬性如下<span style="font-size: x-small;"> <head> <title>Exmaple</title> <meta name=”viewport” content=”width=device-width,user-scalable=no”/> </head></span>
2 CSS控制裝置密度為每種密度建立獨立的樣式表（注意其中的webkit-device-pixel-ratio 3個數值對應3種解析度）<span style="font-size: x-small;"> <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] " /></span>
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /> #header { <span style="white-space: pre;"> </span> background:url(medium-density-image.png); } @media screen and (-webkit-device-pixel-ratio: 1.5) { // CSS for high-density screens #header { background:url(high-density-image.png); } } @media screen and (-webkit-device-pixel-ratio: 0.75) { // CSS for low-density screens #header { background:url(low-density-image.png); } }
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /> Android瀏覽器和WebView支援查詢當前設別密度的DOM特性
window.devicePixelRatio 同樣值有3個（0.75,1,1.5對應3種解析度）
JS中查詢裝置密度的方法
js程式碼
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
} 使用WebView控制元件 與其他控制元件的使用方法相同 在layout中使用一個<WebView>標籤
WebView不包括導航欄，位址列等完整瀏覽器功能，只用於顯示一個網頁
在WebView中載入Web頁面，使用loadUrl()
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.baidu.com");注意在manifest檔案中加入訪問網際網路的許可權：
<uses-permission android:name="android.permission.INTERNET" /> //設定WebViewClient
webView.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
}); 這個WebViewClient物件是可以自己擴充套件的，例如
private class MyWebViewClient extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost().equals("www.example.com")) {
return false;
}
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}
}
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient()); public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {
myWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}