概覽
你可以使用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 www.2cto.com
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");
}
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
