原文： https://developer.android.com/guide/webapps/targeting.html
由于 Android 可用于多種屏幕尺寸與像素密度，在 web 設(shè)計(jì)時(shí)你應(yīng)當(dāng)考慮這些因素以便頁面總是以適當(dāng)?shù)某叽顼@示检眯。
當(dāng)你的 web 頁面目標(biāo)為 Android 設(shè)備時(shí)，有兩個(gè)需要考慮的主要因素：
視口(viewport)
視口是一個(gè)為 web 頁面提供繪圖區(qū)域的矩形。你可以指定數(shù)個(gè)視口屬性，比如尺寸和初始縮放系數(shù)(initial scale)缸沃。最重要是視口寬度衬横，它定義了網(wǎng)頁水平方向的可用像素總數(shù)(可用的CSS像素?cái)?shù))。屏幕密度(screen density)
WebView和大多數(shù) Android 上的網(wǎng)頁瀏覽器會(huì)將你的CSS像素值轉(zhuǎn)換為密度無關(guān)像素值邑贴，因此你的網(wǎng)頁與中密度屏幕(約160dpi)顯示為相同感知的尺寸。
但是叔磷，如果圖像是你的網(wǎng)頁設(shè)計(jì)的重要元素拢驾，你應(yīng)該重視它們?cè)诓煌芏绕聊簧习l(fā)生的縮放，因?yàn)?300px 寬的圖像在 320dpi 屏幕上會(huì)被放大(每CSS像素使用更多的物理像素)并失真(模糊和像素化)改基。
設(shè)置視口屬性
視口(viewport)是你的網(wǎng)頁繪圖的區(qū)域繁疤。
雖然視口的可見區(qū)域在縮放時(shí)總是適應(yīng)屏幕尺寸，但視口有自己的像素尺寸供網(wǎng)頁使用秕狰。
例如稠腊，即使一個(gè)設(shè)備物理寬度是 480px，它的視口寬度也能用 800px封恰。
這使得為 800px 寬設(shè)計(jì)的網(wǎng)頁在視口縮放系數(shù)為1的屏幕上完全可見麻养。
大多數(shù) Android 上的網(wǎng)頁瀏覽器(包括 Chrome)設(shè)置默認(rèn)視口為一個(gè)大尺寸(被稱為"wide viewport mode"，寬約 980px)诺舔。
也有許多瀏覽器默認(rèn)會(huì)盡可能縮放以顯示完整的視口寬度(被稱為"overview mode")鳖昌。
注意：當(dāng)你的頁面在 WebView 中呈現(xiàn)，它默認(rèn)會(huì)使用完全縮放(full zoom)而不是“wide viewport mode”低飒，你可以使用
setUseWideViewPort()啟用“wide viewport mode”许昨。
你可以通過在網(wǎng)頁文檔的<head>中使用<meta name="viewport" ...>標(biāo)簽來為網(wǎng)頁定義視口屬性，比如 寬度(width)與初始縮放級(jí)別(initial zoom level)褥赊。
以下語法展示視口支持的各種屬性與其值接受的類型：
<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"]
" />
例如糕档，下面的<meta>標(biāo)簽指定視口寬度精確匹配設(shè)備屏幕寬度同時(shí)禁用了縮放：
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
當(dāng)你為移動(dòng)設(shè)備優(yōu)化網(wǎng)站時(shí)，你應(yīng)該設(shè)置寬度為"device-width"以便在所有設(shè)備上剛好合適拌喉，然后使用CSS媒體查詢(media queries)來靈活地適配不同屏幕尺寸的布局速那。
注意：僅當(dāng)你確定你的網(wǎng)頁布局是足夠靈活同時(shí)內(nèi)容能適應(yīng)小屏幕的寬度時(shí)你才可以禁用用戶縮放。
使用CSS適配設(shè)備密度
Android 瀏覽器與 WebView 支持的CSS媒體查詢特性-webkit-device-pixel-ratio讓你能為指定的屏幕密度創(chuàng)建樣式尿背。你可以為這個(gè)特性取值 "0.75", "1", "1.5"端仰，分別指定樣式用于低(low)、中(medum)田藐、高(high)密度屏幕的設(shè)備荔烧。
例如吱七，你可以為各個(gè)密度分別創(chuàng)建樣式表：
<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" />
或，在一個(gè)樣式表中指定不同的樣式：
#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);
}
}
關(guān)于處理不同屏幕密度(特別是圖片)的更多信息鹤竭，參考 DPI Images for Variable Pixel Densities
使用JavaScript適配設(shè)備密度
Android 瀏覽器與 WebView 支持的DOM屬性window.devicePixelRatio使你能查詢當(dāng)前設(shè)備的密度踊餐。
這個(gè)屬性的值表示當(dāng)前設(shè)備的縮放系數(shù)。
舉個(gè)例子臀稚，
如果其值是"1.0"吝岭，那么設(shè)備將被識(shí)別為中密度(medium density)且默認(rèn)沒有縮放；
如果其值是"1.5"烁涌，那么設(shè)備將被識(shí)別為高密度(high density)且頁面默認(rèn)放大為1.5倍苍碟；
如果其值是"0.75"，那么設(shè)備將被識(shí)別為低密度(low density)且頁面默認(rèn)縮小為0.75倍撮执；
當(dāng)然，Android 瀏覽器與 WebView 的縮放是基于網(wǎng)頁的目標(biāo)密度舷丹。默認(rèn)目標(biāo)是中密度(medium density)抒钱，但是你可以修改目標(biāo)以調(diào)整網(wǎng)頁在不同屏幕密度的縮放。
舉個(gè)例子颜凯，這里為你展示如何用JavaScript查詢?cè)O(shè)備密度：
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");
}
