Android Web App官方文檔翻譯第二章:屏幕適配
概覽
- 你可以使用viewport的元數據、CSS和Javascript來為不同分辨率的屏幕設置合適的頁面
- 本文檔中的技術適用于Android 2.0及以上設備，針對默認的Android Browser中及在WebView中呈現的頁面
如果你在為Android開發Web應用或者在為移動設備重新設計一個Web應用，你需要仔細考慮在不同設備上你的頁面看起來是怎樣的。因為Android設備有不同款型，因此你需要考慮影響你的頁面在Android設備上展示的一些因素。
注意： 該文檔中考慮的特性只被Android 2.0 以及更高版本上的Android Browser application（由默認Android平臺提供的）和WebView（用以展現web頁面的框架工具集）支持。在Android上運行的第三方瀏覽器可能并不支持這些用來控制viewport和分辨率的特性。
當為Android設備設計頁面時，有兩個需要考慮的基本因素：
| Viewport的大小以及web page的規模 |
當Android Browser加載一個頁面的時候，默認是以”overview mode”加載，以提供一個放大的頁面。你可以通過定義viewport的默認尺寸或者是viewport的初始規模來改寫這一行為。你同樣可以控制用戶放大或縮小頁面的程度。用戶也可以在瀏覽器設置中屏蔽overview mode，這樣的情況下你就不應該假設你的頁面是以overview mode加載的。相反，你應該為你的頁面定制合適的viewport大小和規模。
然而，當你的頁面在WebView中展現的時候，頁面是以***化形式加載的（而不是”overview mode”）。也就是說，它是以頁面默認大小展示的，而不是放大以后的頁面（即使用戶屏蔽了overview mode，頁面也是如此展示）。
設備屏幕的分辨率
Android設備的屏幕分辨率會影響web頁面展現的分辨率和展現大小。（有三種屏幕分辨率：低、中、高。）Android瀏覽器和WebView通過縮放頁面來適應不同屏幕分辨率，這樣所有的設備都是以默認大小即中分辨率的大小來展示web頁面的。如果在你的web頁面中，圖像是很重要的一部分，那么你就需要密切關注在不同分辨率下發生的縮放，因為圖像縮放可能會帶來模糊以及像素化的問題。
為了在所有分辨率下都能提供***的視覺效果，你需要通過提供你的頁面的目標分辨率的viewport元數據來控制縮放，并通過使用CSS或者Javascript來為不同分辨率提供不同圖像。
這篇文檔剩下的部分講述了你該如何考慮這些影響并為不同類型的屏幕提供一個好的設計。
使用Viewport 元數據
Viewport是指用以展現你的頁面的區域。盡管viewport的可見區域和屏幕大小是匹配的，但是它有著自己的尺寸（dimensions），這一尺寸決定了頁面上可見的像素點。也就是說，一個web頁面在擴張到整個屏幕之前占用的像素數據是由viewport的尺寸（dimensions）來定義的，而不是設備屏幕的尺寸。例如，盡管一個設備的屏幕寬480像素，但是viewport寬800像素，那么這個web頁面需要在800像素寬的屏幕上才能完全展現。
你可以在HTML中使用 <meta> tag（這個tag必須包含在文檔的<head>中）來為你的頁面定義viewport的性質。你可以在 <meta> tag的content 屬性中，定義多個viewport性質。例如，你可以定義viewport的高和寬，頁面的最初大小，以及目標屏幕分辨率。content 屬性中的每個viewport性質必須以逗號相隔。
例如，下面的HTML片段指定了viewport寬度必須嚴格和屏幕寬度匹配，并禁用了放大功能：
- <head>
- <title>Example</title>
- <meta name=”viewport” content=”width=device-width, user-scalable=no” />
- </head>
這是個定義兩個viewport性質的例子。下面的語法顯示了所有受支持的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] ,
- target-densitydpi = [dpi_value | device-dpi |
- high-dpi | medium-dpi | low-dpi]
- " />
下面的部分討論了如何使用這些viewport性質以及可以賦給這些性質的值到底是怎樣。
定義viewport大小
Figure 1. 一個web頁面，其中有320像素寬的圖像，在Android Browser中呈現，沒有設置viewport元數據（開啟了"overview mode"，viewport默認為800像素寬）
Viewport的height 和 width性質讓你可以指定viewport大小（即頁面在擴張到屏幕之前可見的大小）。
跟上面提到的一樣，Android Browser默認以”overview mode”加載頁面（除非這一模式被用戶禁用），將最小的viewport寬度定義為800像素。因此，如果你的web頁面定義的寬度為320像素的話，那么你的頁面看起來就比屏幕小（除非你的物理屏幕是320像素寬的，因為viewport模擬出了一個800像素寬的可繪圖區域），就如figure 1中所示。為避免這一影響，你需要顯式定義viewport的width與你設計的web頁面的寬度匹配。
例如：如果你的web頁面是設計為320像素寬的，那么你就需要為viewport的width指定相同大小如下：
- <meta name="viewport" content="width=320" />
在這個例子中，你的web頁面和屏幕寬度大小剛好是匹配的，因此頁面寬度和viewport的width是一致的。
注意： 大于10,000的width值將被忽略，小于或等于320的值將會使得width的值等于設備的寬度（下面將會討論）。大于10,000或者小于200的height值將被忽略。
為了展現這個性質是如何影響頁面大小的，figure 2展示了一個web頁面，在這里，web頁面中包含一個320像素寬的圖像，但是viewport的width設置為400.
注意：如果你設置viewport的width與頁面寬度匹配而設備屏幕大小和這些尺寸不匹配的話，web頁面將仍然占滿整個屏幕，即使設個設備屏幕是低分辨率或者高分辨率的，因為Android Browser和WebView 默認將web頁面縮放到中等分辨率屏幕大小（如同你在figure 2中看到的一樣，圖中對比了高分辨率和中等分辨率設備）屏幕分辨率在Defining the viewport target density中有更多討論。
自動縮放
Figure 2. 設置viewport width=400 ，開啟 "overview mode" (頁面中的圖像為 320 像素寬).
除了將viewport尺寸定義為精確的數值以外，你還可以將其設置為永遠和設備屏幕尺寸匹配，即將viewport的height和width分別賦值為device-height 和device-width。這在你開發一個有著活動大小的web應用的時候是非常合適的，這能使這個web應用的頁面好像是固定的（和每個屏幕寬度都精確匹配）。例如：
- <meta name="viewport" content="width=device-width" />
Figure 3. 設置 viewport width=device-width or initial-scale=1.0的web頁面.
設置viewport尺寸永遠和屏幕尺寸匹配結果如figure 3所示。需要注意的是，這樣的設置會導致圖片縮放到與屏幕匹配，即使當前設備和target density（默認情況下是中等分辨率）并不匹配。因此，figure 3中的高分辨率設備的圖片在中等分辨率的設備上放大了，以便和屏幕寬度匹配。
注意：如果你希望device-width 和 device-height和設備的物理屏幕的像素匹配，而不是通過縮放web頁面來和target density匹配，那么你就必須包含一個target-densitydpi性質并將其賦值為 device-dpi。這在Defining the viewport density中將會有更多討論。否則，只使用device-width 和 device-height來定義viewport大小的話會讓你的頁面自動適應每個屏幕，但是你的圖片也會縮放以便適應不容屏幕分辨率。
定義viewport規模
Viewport規模確定了頁面的縮放程度。Viewport性質能讓你以下面的方式指定頁面縮放程度：
初始縮放（initial-scale）
即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，如果你設置初始縮放為“1.0”，那么，web頁面在展現的時候就會以target density分辨率的1:1來展現。如果你設置為“2.0”，那么這個頁面就會放大為2倍。
默認的初始縮放值是通過計算讓頁面和viewport大小匹配。因為默認viewport寬度是800像素，如果設備屏幕分辨率寬度小于800，那么初始縮放值在默認情況下是小于1.0的，以便和屏幕上的800像素寬的頁面匹配。
最小縮放（minimum-scale）
即允許的最小縮放程度。這是一個浮點值，用以指出頁面大小與屏幕大小相比的最小乘數。例如，如果你將這個值設置為“1.0”，那么這個頁面將不能縮小，因為最小值和 target density為1:1的關系。
***縮放（maximum-scale）
即允許的***縮放程度。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的***乘數。例如，如果你將這個值設置為“2.0”，那么這個頁面與target size相比，最多能放大2倍。
用戶調整縮放（user-scalable）
即用戶是否能改變頁面縮放程度。如果設置為yes則是允許用戶對其進行改變，反之為no。默認值是yes。如果你將其設置為no，那么minimum-scale 和 maximum-scale都將被忽略，因為根本不可能縮放。
所有的縮放值都必須在0.01–10的范圍之內。
例如：
- <meta name="viewport" content="initial-scale=1.0" />
這個元數據將初始縮放值定義為和viewport的target density相比為滿屏。
定義viewport的target density
一個屏幕像素密度是由屏幕分辨率決定的，通常定義為每英寸點的數量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多。Android Browser和WebView默認屏幕為中像素密度。
因為默認target density是中像素密度，因此當用戶擁有一個低像素或者高像素密度的屏幕時，Android Browser和 WebView會縮放頁面，以便它們能在中等像素密度的屏幕以合適的大小展示。更具體來說，Android Browser和 WebView會在高像素密度設備上將頁面放大約1.5倍（因為高像素密度設備上的像素點更小），而在低像素密度設備上將頁面縮小為約0.75倍（因為低像素密度設備上的像素點更大）。
由于默認縮放，figure 1,2,3展現了同樣物理大小的web頁面在高像素密度設備和中等像素密度設備上的效果（高像素密度設備上的web頁面放大到實際的1.5倍，以便和target density匹配）。這會給圖像帶來一些問題。比如，盡管一個圖像在中等像素密度和高像素密度設備上看起來大小一樣，但是高像素密度設備上的圖像看起來更為模糊，因為這個圖像本來是為320像素寬而設計的，但卻被拉到了480像素寬。
Figure 4. 設置 viewport width=device-width ， target-densitydpi=device-dpi的web頁面.
你可以通過使用viewport的target-densitydpi性質來改變目標屏幕像素密度。可以賦給它的值如下所列：
- device-dpi –使用設備原本的 dpi 作為目標 dp。 不會發生默認縮放。
- high-dpi – 使用hdpi 作為目標 dpi。 中等像素密度和低像素密度設備相應縮小。.
- medium-dpi – 使用mdpi作為目標 dpi。 高像素密度設備相應放大， 像素密度設備相應縮小。 這是默認的target density.
- low-dpi -使用mdpi作為目標 dpi。中等像素密度和高像素密度設備相應放大。
- <value> - 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。
例如，為了防止Android Browser和WebView 根據不同屏幕的像素密度對你的頁面進行縮放，你可以將viewport的target-densitydpi 設置為 device-dpi。當你這么做了，頁面將不會縮放。相反，頁面會根據當前屏幕的像素密度進行展示。在這種情形下，你還需要將viewport的width定義為與設備的width匹配，這樣你的頁面就可以和屏幕相適應。例如：
- <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
Figure 4 展示了使用這些設置的一個web頁面——在高像素密度設備上，這個頁面看起來小一些了，因為它的物理像素點比中等像素密度設備上的像素點要小，而又沒有縮放發生，因此320像素寬的圖像在兩個界面上都只占用了320像素寬。（如果你想要根據屏幕像素密度來定制你的web頁面的話，你就應該如此定義viewport，并使用CSS 或者 JavaScript來為不同像素密度設備提供不同圖像。）
針對不同像素密度應用CSS
Android Browser和WebView支持一個CSS的media特性，讓你能為特定像素密度的設備來創建styles——這個media特性就是 -webkit-device-pixel-ratio CSS media feature。你賦給這個特性的值應該是”0.75″, “1″, 或 “1.5″，來分別指出styles是針對低像素密度、中等像素密度和高像素密度的。
例如：你可以為不容像素密度創建樣式列表stylesheets如下：
- <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" />
Figure 5. 使用CSS中的 -webkit-device-pixel-ratio 來為不同分辨率的屏幕指定不同web頁面。注意在hdpi設備中使用的是一幅不同的圖片。
或者，在一個樣式表中指定不同的styles：
- #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默認的style是將圖片應用于中等像素密度的設備，以支持Android2.0以下的設備，這些設備是不支持-webkit-device-pixel-ratio的。
根據你設置的viewport性質不同，你要調整的對不同像素密度的styles的風格也應該不同。為了讓你的頁面能在不同像素密度下都有合適的styles，你需要將viewport的寬度設置為與設備匹配。即：
- <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
通過這種方式，Android Browser和 WebView就不會對你的頁面進行縮放，并且viewport的width能與設備的width精確匹配。這一設置效果如figure 4所示。然而，通過使用-webkit-device-pixel-ratio ，你可以應用不同的styles。例如，在figure 5中，展示了一個使用如上viewport設置并使用了一些CSS的頁面，在這個CSS中，定義將高分辨率的圖像用于高像素密度的屏幕。
針對不同像素密度應用 JavaScript
Android Browser和 WebView支持一個文檔對象模型（DOM）特性，可以讓你查詢當前設備的像素密度——即DOM的window.devicePixelRatio 特性。這個特性的值指定了當前設備的縮放因子。例如，如果window.devicePixelRatio的值是“1.0”，則這個設備是一個中等像素密度的設備，默認不縮放；如果window.devicePixelRatio的值是“1.5”，則這個設備是一個高像素密度的設備，默認以1.5倍縮放；如果window.devicePixelRatio的值是“0.75”，則這個設備是一個低像素密度的設備，默認以0.75倍縮放。當然，Android Browser 和WebView 是根據頁面的target density進行縮放的，和上文討論的一樣，其默認target是中等像素密度，但是你可以修改這個target，調整你的頁面在不同屏幕分辨率下的縮放方式。
例如：你可以像下面這樣通過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");
- }
