博客爲 有時個哥 原創，如需轉載請標明出處：http://blog.csdn.net/ls703/article/details/45509073
如果你在Android設備上設計開發一款web應用，你就應該考慮web頁面在不同屏幕上的顯示問題。因爲Android有很多不同類型的手機屏幕，所以你應該去考慮那些影響web頁面在Android設備上顯示的因素。
注意：本文中描述的以下特性，已經在Android 2.0或更高的版本中的Android瀏覽器（Android系統默認的）和WebView（Android中用於顯示網頁的控件）上得到支持。第三方的瀏覽器可能不支持這些的屬性。（也就是說只做瞭解）
針對web頁面適配Android設備，你應該考慮這兩個基本的因素：
窗口大小和web頁面的縮放問題
當Android瀏覽器加載頁面時，默認的是採用的“概覽模式”，它提供一個web頁面的縮放視角。你可以通過設定窗口的默認大小（或初始化大小）去改變瀏覽器的默認模式。你 也能控制用戶縮放web頁面的比例。用戶也能在瀏覽器設置中去禁用Android瀏覽器的“概覽模式”，所以不要以爲web頁面會一直在“概覽模式“下加載。所以你應該去自定義窗口的大小及頁面的縮放比例來替代它。
然而，頁面在WebView控件加載時，是加載的原網頁大小（不是”在概覽模式“下加載的）。因此，它顯示的是網頁默認的大小，而不是縮放之後的頁面。（這也是在用戶禁用”概覽模式“後，怎樣去顯示web頁面的問題）。
設備的屏幕密度
Android設備商的密度（每英寸的像素數量）決定頁面顯示的大小。（屏幕密度分類：低，中，高）。Android瀏覽器和WebView可以通過縮放來彌補不同手機屏幕的像素密度的差異，以至於所有頁面在所有的設備上看起來是一樣的。如果圖片在你的web設計中是重要的組成元素，你就應該特別的注意web在不同的設備上的縮放。因爲圖片有可能會失真。
爲了在不同設備上達到最好的視覺效果，你應該控制縮放的比例，通過提供不同展示web頁面的屏幕密度的元數據和針對不同屏幕密度的不同分辨率的圖片，使其適用於使用CSS或JavaScript不同的屏幕。
本文的剩餘本分描述的是如何解釋這些影響並在不同的設備上提供一種好的設計。
Using Viewport Metadata
窗口是指的頁面顯示的區域範圍。儘管窗口的顯示區域是匹配屏幕大小的，但是窗口也是有自己的尺寸的，它的尺寸取決於顯示頁面的像素的數量。因此，當頁面的原大小是超過屏幕大小的時候，頁面的像素數量是通過窗口的尺寸來定義的，而不是設備屏幕大小來決定的。例如，有一個手機屏幕的寬度是480像素，而窗口的寬度爲800像素的尺寸，所以頁面設計成800像素就可完全在屏幕上完整顯示。
（自己理解：這裏可以簡單的理解爲，顯示頁面的窗口控件的大小是通過屏幕大小來決定大小的，而窗口有自己能顯示最大頁面像素的大小，比如在這個窗口裏能顯示一個800像素的頁面，那頁面設計成800像素，就完整顯示了，這個窗口你可以理解爲和圖片似得，圖片外表大小看着一樣，但是他們的像素可能不一樣，就這個意思）。
你可以通過在html頁面的<meta>標籤（必須是放置在<head>標籤裏）中定義窗口的屬性。你可以在<meta>中通過content屬性字段定義窗口的多個屬性。例如你能定義窗口的高度和寬度，頁面的縮放初始比例和目標屏幕的分辨率。在content屬性字段中每個窗口屬性值必須用逗號分開。
例如下面一段來自html裏面的代碼，它設定窗口大小完全匹配設備屏幕的寬度，並把縮放功能禁用掉了。
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
下面是兩個窗口屬性的實例演示，下列顯示的是窗口支持的全部屬性，並給出了每個屬性所對應的所有的屬性值：
<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]
" />
下面的部分是討論怎樣去使用每一個屬性，及每個屬性值的作用是什麼。
Defining the viewport size（設定窗口大小）
視圖的height和width 的屬性允許你去指定窗口的大小（在顯示到屏幕上之前，設定顯示頁面的像素數量）。
上面文檔上提到的Android瀏覽器加載頁面是默認使用的“概覽模式”（除非用戶禁用），這種模式的設置的窗口的最小值是800像素。所以如果你的頁面如果設定的頁面大小是320個像素時，那麼它在屏幕上顯示時看起來是比較小的，（即使屏幕的物理窗口是 320像素時也會這樣，因爲顯示頁面的窗口它模擬範圍是到800個像素寬度），就像圖一。
所以爲了避免這種情況，你該明確指定你的窗口大小和你所設計的網頁大小完全匹配。
例如你的頁面設計成320個像素寬，那麼你的窗口也要設計成寬度爲320像素。
<meta name="viewport" content="width=320" />這樣設置之後，你的頁面就正好適配你的屏幕的寬度了，因爲你的頁面和窗口的像素是一樣的。
注意：如果寬度的值大於10000的則會被忽略，而寬度比320小或等於320的則會被設置成設備的寬度(下面討論).高度的值大於10000或小雨200的都將會唄忽略。
下面展示這屬性怎樣影響頁面的大小，圖二中顯示一個包含一張320小蘇寬度的圖片的web頁面，但是窗口設置的是400像素寬度
注意：如果你設置窗口的寬度與你的web頁面的寬度匹配，設備的屏幕的寬度不匹配這些，這些頁面仍然會適合這些屏幕，即使這些設備的屏幕的分辨率有高或有低的。
因爲Android瀏覽器和webview會默認的把頁面縮放成它們認爲適合當前屏幕（圖中是中等密度的屏幕）的大小。（真如你看到的圖二中，hdip設備以mdip的設備的對比）。
屏幕密度將在Defining the viewport target density.中討論的更多。
Automatic sizing
你可以用下面這種方法去替代設置窗口尺寸像素這種方法。你可以通過把窗口的height和width屬性的值設置成device-height 和 device-width，來使窗口去適配設備屏幕的大小。當你開發的webapp的寬度是變化的（不是固定的），使用這種方法是合適的，除了寬度是固定的顯示以外（把頁面的寬度設置成適配每一個屏幕大小的）。
例如：
<meta name="viewport" content="width=device-width" />這樣做的結果是，無論你當前的屏幕是什麼，窗口都會去匹配這些屏幕，如圖3中顯示的一樣。去注意這一點是非常重要的，噹噹前的設備（如果你不指定就拿圖中的中密度設備爲例子）不匹配目標密度的時候，圖片會自動縮放去匹配設備屏幕。如圖三中，在高密度設備上的顯示的圖片，爲了去適配中密度的設備，圖片被按比例放大了。
注意：如果你想用device-width 和device-height去適配每個設備的密度，而不是去縮放web頁面，你必須還要使用target-densitydpi這個屬性和他的device-dpi這個值。這將在Defining the viewport density.中進行更多的討論。
Defining the viewport scale
窗口的比例規定了web頁面的縮放，下面的窗口屬性允許你去設定頁面的比例：
initial-scale
頁面的最初比例。這個web頁面相對於你屏幕大小放大的倍數是一個float值。例如，你設置initial-scale的值爲“1.0”，則web頁面就是按照你目標密度的1比1的比例來做適配顯示，如果設置成2.0，這個頁面就會擴大兩倍。
默認的初始比例是計算出適配窗口的頁面的大小。因爲默認的窗口的寬度是800像素，如果屏幕的分辨率低於800像素寬度，怎這個初始化比例大約比1.0 要小。默認的是爲了800像素在屏幕上適配。
minimum-scale
允許的最小比例。相對於當前屏幕大小的最小縮放倍數，是一個float。例如，你設置成“1.0”，則web頁面就不能縮小，因爲他的最小的比例就是1比1.
maximum-scale
允許的最大比例。相對於當前屏幕大小的最大縮放倍數，是一個float。例如，如果你設置成“2.0”，你就不能比2倍再大了。
user-scalable
用戶能隨意的放大或縮小頁面。設置成“yes”允許，“no”禁止。默認的是“yes”。如果你設置成“no”，minimum-scale 和 maximum-scale將是被忽略的，因爲他們不可用了。
所有的比例的範圍是0.01–10。
實例：
<meta name="viewport" content="initial-scale=1.0" />這個數據是表示設置的比例是相對於目標像素的全尺寸。
Defining the viewport target density（設置窗口密度）
設備的密度是基於設備屏幕的分辨率，其定義是每英寸的像素點數(dpi)。android 中支持三種不同的屏幕密度的類型：low (ldpi), medium (mdpi),和 high (hdpi)。低密度屏幕是每英寸有較少的像素點，而高密度屏幕有較多的像素點（相對於中密度屏幕比較）。Android瀏覽器和webview的默認磨邊像素是中等像素。
因爲默認的目標像素是中等像素，所以當用戶有一個高像素或低像素的手機設備時，Android瀏覽器和WebView會縮放頁面，以至於他們的顯示大小匹配中等像素屏幕，使其顯示效果和中等屏幕上一樣。更準確的說，Android瀏覽器和WebView在高像素設備上大約是擴大1.5倍（因爲他的屏幕像素更小），在低像素上大約是原來的0.75倍（因爲他的屏幕像素更大）。
由於默認的縮放，圖一圖二和圖三顯示的實例，web頁面在物理尺寸相同的高像素和中像素設備上顯示，高像素的設備顯示頁面的的默認比例因子是實際像素的的1.5倍。這就可能會使圖片的顯示造成一些問題。例如，儘管在高密度設備和中密度設備上圖片顯示的大小是一樣的，但是圖片在高像素設備上顯示是更模糊的，因爲圖片是隻有320個像素寬度，但是他被畫的像素寬度是480個像素。
在你的web頁面中通過使用target-densitydpi這個窗口屬性你可以改變目標屏幕的密度。他的屬性值有下面幾個：
device-dpi 用設備自己的dpi作爲目標像素，默認不會發生縮放。
high-dpi 使用hdpi來作爲目標像素。中像素和低像素的屏幕都縮小爲適當的大小。
medium-dpi 用mdpi作爲目標像素。高像素屏幕放大，低像素屏幕縮小。這是默認的目標像素。
low-dpi 用ldpi作爲目標像素。高像素屏幕和中像素屏幕都放大到適當的大小。
<value> 指定像素值作爲目標像素。值的範圍是在70-400。
例如，爲了防止Android瀏覽器和webView去根據不同的屏幕去縮放的web頁面，把target-densitydpi的值設置爲device-dpi。如果你這樣做了，則頁面就不縮放了。相反的，當前頁面的顯示是根據當前屏幕密度來匹配的。因此，你應該設計你的窗口寬度去匹配你的設備寬度，這樣你的web頁面自然而然的就適配了你的屏幕。
例如：
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
圖四中顯示的web頁面就用了這些窗口屬性。在高密度設備上顯示的比較小。因爲他的實際像素相比於中密度設備來說是比較少的，因此沒有擴展發生。在這兩個設備上這個320個像素寬度的照片都是使用的320個像素繪畫的。（這就是怎樣去定義你的窗口的方法，當你是根據你屏幕密度和提供不同像素密度的圖片資源去定義你的帶有js和css的web頁面時）。
Targeting Device Density with CSS（真對設備密度使用css）
Android瀏覽器和WebView支持CSS的功能，即-webkit-device-pixel-ratio css media這個屬性，允許對特定的屏幕創建特定的css風格，他的屬性值是“0.75”，“1.0”和“1.5”用來分別表示低密度，中密度和高密度的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" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.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);
}
}
中等設備上#header的默認樣式是爲了支持在2.0一下版本正常運行，因爲它們不支持-webkit-device-pixel-ratio media這個特性。
根據屏幕的密度你可以通過去設定窗口的屬性去調整樣式的種類。爲了能對所支持的不同密度去對你的網頁提供完全個性化的樣式，你應該去設置窗口的屬性以至於窗口寬度和密度匹配設備。正如下面：
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
這樣設置，Android瀏覽器和webView不能縮放頁面並且窗口的寬度正好匹配屏幕寬度。這些窗口屬性的所得到效果如圖四所示。然而通過用-webkit-device-pixel-ratiomedia屬性添加一些自定義css，你就能夠應用不同的樣式。例如，圖5中所展示的web頁面，是通過設置窗口屬性和添加css，是在高像素設備上調用了高像素的圖片。
Targeting Device Density with JavaScript
Android瀏覽和webView支持一個可以允許查詢當前設備密度的DOM屬性-------window.devicePixelRatio DOM屬性。這個屬性的值就是當前設備的縮放倍數。例如，當window.devicePixelRatio的值等於“1.0”，則當前設備被認爲中等密度的設備並不縮放；如果值等於“1.5”，這設備被認爲是高密度設備並且頁面 默認放大1.5倍；如果值是“0.75”，則這設備被認爲是低密度設備，默認縮放0.75倍。Android瀏覽器和WebView的縮放是以頁面目標像素問基礎的----這Defining the viewport target density,這衣部分以做了描述，默認的密度是中等密度，但是你可以改變目標密度去影響你的web頁面在不同屏幕上怎樣去縮放。
例子，你可以通過js去查詢設備的密度：
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");
}