Android Web App官方文檔翻譯第二章:屏幕適配

原創 _liushu 2019-02-22 22:35

概覽

  • 你可以使用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寬度必須嚴格和屏幕寬度匹配，並禁用了放大功能：
  1. <head> 
  2. <title>Example</title> 
  3. <meta name=”viewport” content=”width=device-width, user-scalable=no” /> 
  4. </head> 
這是個定義兩個viewport性質的例子。下面的語法顯示了所有受支持的viewport性質及各個性質接受的數據基本屬性：
  1. <meta name="viewport" 
  2.        content=" 
  3.            height = [pixel_value | device-height] , 
  4.            width = [pixel_value | device-width ] , 
  5.            initial-scale = float_value , 
  6.            minimum-scale = float_value , 
  7.            maximum-scale = float_value , 
  8.            user-scalable = [yes | no] , 
  9.            target-densitydpi = [dpi_value | device-dpi | 
  10.                                 high-dpi | medium-dpi | low-dpi] 
  11.            " /> 
下面的部分討論瞭如何使用這些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指定相同大小如下：
  1. <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應用的頁面好像是固定的（和每個屏幕寬度都精確匹配）。例如：
  1. <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的範圍之內。
例如：
  1. <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匹配，這樣你的頁面就可以和屏幕相適應。例如：
  1. <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如下：
  1. <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
  2.  <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /> 
  3. <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：
  1. #header { 
  2.  
  3. background:url(medium-density-p_w_picpath.png); 
  4.  
  5. } 
  6.  
  7. @media screen and (-webkit-device-pixel-ratio: 1.5) { 
  8.  
  9. /* CSS for high-density screens */ 
  10.  
  11. #header { 
  12.  
  13. background:url(high-density-p_w_picpath.png); 
  14.  
  15. } 
  16.  
  17. } 
  18.  
  19. @media screen and (-webkit-device-pixel-ratio: 0.75) { 
  20.  
  21. /* CSS for low-density screens */ 
  22.  
  23. #header { 
  24.  
  25. background:url(low-density-p_w_picpath.png); 
  26.  
  27. } 
  28.  
  29. } 
注意：#header默認的style是將圖片應用於中等像素密度的設備，以支持Android2.0以下的設備，這些設備是不支持-webkit-device-pixel-ratio的。
根據你設置的viewport性質不同，你要調整的對不同像素密度的styles的風格也應該不同。爲了讓你的頁面能在不同像素密度下都有合適的styles，你需要將viewport的寬度設置爲與設備匹配。即：
  1. <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來查詢設備像素密度：
  1. if (window.devicePixelRatio == 1.5)
  2.  {
  3.    alert("This is a high-density screen"); }
  4.  else if (window.devicePixelRatio == 0.75)
  5.  {
  6.    alert("This is a low-density screen");
  7.  }  
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

WVGA與HVGA、QVGA詳細解答

劉崇瓊 2019-02-23 14:05:54

迷你Wifi攝像機介紹

ran_sy 2019-02-23 13:41:40

jQuery判斷不同分辨率下的div樣式

1枚小菜鳥 2019-02-23 00:21:46

雲楚煌8600升降器

yunchuhuang 2019-02-23 00:08:47

Cisco設備初始配置的幾個必備點

781732825 2019-02-23 13:43:04

使用組策略限制設備使用

781732825 2019-02-23 13:43:04

蘋果仍處於開發中的腕錶式設備

blmzmx 2019-02-23 13:08:57

交換機span配置

乘風來 2019-02-23 13:01:15

linux查看硬件設備信息

garber 2019-02-23 12:50:46

STP,RSTP,MSTP和鏈路聚合

小小的寶貝 2019-02-23 00:31:39

交換機SPAN功能配置

33liu 2019-02-23 00:31:10

實驗四 交換機SPAN功能配置

1406404014 2019-02-23 00:13:53

Cisco對於提高網絡的高可用性的技術

bboy轉彎 2019-02-23 00:01:31

Introduction to3D Game Programming withDirectX翻譯開篇

985850293 2019-02-23 13:55:15

QT DEMO翻譯之--對話框部分(二)--License Wizard Example第二部分

阿潘的兔子 2019-02-23 00:27:10