顯示兼容性
首先明確一下兩個重要概念：
1. 視窗（viewport）：視窗就是網頁可見的矩形區域，可以指定大小和縮放比例等屬性。最重要屬性是視窗的寬度，這個寬度是從網頁的角度來看水平方向上所有可用的像素總數。
2. 屏幕密度：WebView和大部分Android瀏覽器會把CSS的像素值轉換爲dip單位值，Android中在160dpi的密度下1dip=1px。所以最好考慮到不同密度下的縮放問題。
1.設置視窗屬性
視窗的物理寬度一般就是WebView的寬度，但是視窗可顯示內容的寬度可以比物理寬度更寬。比如說屏幕寬度爲480px的話，視窗物理寬度也爲480px，但是卻可以完全顯示一個寬度爲800px的網頁，而且縮放是1.0倍。這是通過設置wideViewportMode來實現的，wideViewportMode大概是980px左右。也可以設置overviewMode來完全顯示網頁。
WebView默認不會使用wideViewportMode，可以通過調用setWideViewPort()開啓。
可以在網頁的<head>中設置viewport的屬性：
<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"]
" />比如說這樣子聲明：
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>網頁針對移動端進行適配的話最好是設成width=device-width。
2.根據屏幕密度設置CSS
可以根據不同屏幕密度提供不同的CSS，比如：
<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" />1.0代表mdpi，0.75代表ldpi，1.5代表hdpi，依此類推。
也可以在同一個CSS中對屏幕密度進行區分：
#header {
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);
}
}3.使用JavaScript
Android瀏覽器和WebView提供一個DOM屬性來查詢當前設備的密度：window.devicePixelRatio，這個屬性值就是網頁需要縮放的比例。該值由網頁的目標密度和當前設備密度來決定。網頁目標密度默認是mdpi。
比如在JavaScript代碼中可以這樣調用：
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
alert("This is a low-density screen");
}WebView的使用
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>網絡權限的申請：
<manifest ... >
<uses-permission android:name="android.permission.INTERNET" />
...
</manifest>加載網頁：
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");JavaScript的使用
開啓JavaScript：
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
