標籤：android開發 web app webview webapp適配
如果你在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");}
android API Guides 之 web app -------------Targeting Screens from Web Apps（螢幕適配）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
