完美世界辰东小说下载,玄幻小说,欢乐颂第二季

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

AndroidWebApp官方文檔翻譯第二章:屏幕適配

概覽

你可以使用viewport的元數(shù)據(jù)、CSS和Javascript來為不同分辨率的屏幕設(shè)置合適的頁面
本文檔中的技術(shù)適用于Android 2.0及以上設(shè)備，針對默認的Android Browser中及在WebView中呈現(xiàn)的頁面

如果你在為Android開發(fā)Web應(yīng)用或者在為移動設(shè)備重新設(shè)計一個Web應(yīng)用，你需要仔細考慮在不同設(shè)備上你的頁面看起來是怎樣的。因為Android設(shè)備有不同款型，因此你需要考慮影響你的頁面在Android設(shè)備上展示的一些因素。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供詔安網(wǎng)站建設(shè)、詔安做網(wǎng)站、詔安網(wǎng)站設(shè)計、詔安網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、詔安企業(yè)網(wǎng)站模板建站服務(wù)，十余年詔安做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

注意： 該文檔中考慮的特性只被Android 2.0 以及更高版本上的Android Browser application（由默認Android平臺提供的）和WebView（用以展現(xiàn)web頁面的框架工具集）支持。在Android上運行的第三方瀏覽器可能并不支持這些用來控制viewport和分辨率的特性。

當為Android設(shè)備設(shè)計頁面時，有兩個需要考慮的基本因素：

Viewport的大小以及web page的規(guī)模

當Android Browser加載一個頁面的時候，默認是以”overview mode”加載，以提供一個放大的頁面。你可以通過定義viewport的默認尺寸或者是viewport的初始規(guī)模來改寫這一行為。你同樣可以控制用戶放大或縮小頁面的程度。用戶也可以在瀏覽器設(shè)置中屏蔽overview mode，這樣的情況下你就不應(yīng)該假設(shè)你的頁面是以overview mode加載的。相反，你應(yīng)該為你的頁面定制合適的viewport大小和規(guī)模。

然而，當你的頁面在WebView中展現(xiàn)的時候，頁面是以***化形式加載的（而不是”overview mode”）。也就是說，它是以頁面默認大小展示的，而不是放大以后的頁面（即使用戶屏蔽了overview mode，頁面也是如此展示）。

設(shè)備屏幕的分辨率

Android設(shè)備的屏幕分辨率會影響web頁面展現(xiàn)的分辨率和展現(xiàn)大小。（有三種屏幕分辨率：低、中、高。）Android瀏覽器和WebView通過縮放頁面來適應(yīng)不同屏幕分辨率，這樣所有的設(shè)備都是以默認大小即中分辨率的大小來展示web頁面的。如果在你的web頁面中，圖像是很重要的一部分，那么你就需要密切關(guān)注在不同分辨率下發(fā)生的縮放，因為圖像縮放可能會帶來模糊以及像素化的問題。

為了在所有分辨率下都能提供***的視覺效果，你需要通過提供你的頁面的目標分辨率的viewport元數(shù)據(jù)來控制縮放，并通過使用CSS或者Javascript來為不同分辨率提供不同圖像。

這篇文檔剩下的部分講述了你該如何考慮這些影響并為不同類型的屏幕提供一個好的設(shè)計。

使用Viewport 元數(shù)據(jù)

Viewport是指用以展現(xiàn)你的頁面的區(qū)域。盡管viewport的可見區(qū)域和屏幕大小是匹配的，但是它有著自己的尺寸（dimensions），這一尺寸決定了頁面上可見的像素點。也就是說，一個web頁面在擴張到整個屏幕之前占用的像素數(shù)據(jù)是由viewport的尺寸（dimensions）來定義的，而不是設(shè)備屏幕的尺寸。例如，盡管一個設(shè)備的屏幕寬480像素，但是viewport寬800像素，那么這個web頁面需要在800像素寬的屏幕上才能完全展現(xiàn)。

你可以在HTML中使用 tag（這個tag必須包含在文檔的中）來為你的頁面定義viewport的性質(zhì)。你可以在 tag的content 屬性中，定義多個viewport性質(zhì)。例如，你可以定義viewport的高和寬，頁面的最初大小，以及目標屏幕分辨率。content 屬性中的每個viewport性質(zhì)必須以逗號相隔。

例如，下面的HTML片段指定了viewport寬度必須嚴格和屏幕寬度匹配，并禁用了放大功能：

這是個定義兩個viewport性質(zhì)的例子。下面的語法顯示了所有受支持的viewport性質(zhì)及各個性質(zhì)接受的數(shù)據(jù)基本屬性：

 
 
 
 
  
  
  
  
  
  
  
  
       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性質(zhì)以及可以賦給這些性質(zhì)的值到底是怎樣。

定義viewport大小

Figure 1. 一個web頁面，其中有320像素寬的圖像，在Android Browser中呈現(xiàn)，沒有設(shè)置viewport元數(shù)據(jù)（開啟了"overview mode"，viewport默認為800像素寬）

Viewport的height 和 width性質(zhì)讓你可以指定viewport大?。错撁嬖跀U張到屏幕之前可見的大小）。

跟上面提到的一樣，Android Browser默認以”overview mode”加載頁面（除非這一模式被用戶禁用），將最小的viewport寬度定義為800像素。因此，如果你的web頁面定義的寬度為320像素的話，那么你的頁面看起來就比屏幕小（除非你的物理屏幕是320像素寬的，因為viewport模擬出了一個800像素寬的可繪圖區(qū)域），就如figure 1中所示。為避免這一影響，你需要顯式定義viewport的width與你設(shè)計的web頁面的寬度匹配。

例如：如果你的web頁面是設(shè)計為320像素寬的，那么你就需要為viewport的width指定相同大小如下：

在這個例子中，你的web頁面和屏幕寬度大小剛好是匹配的，因此頁面寬度和viewport的width是一致的。

注意： 大于10,000的width值將被忽略，小于或等于320的值將會使得width的值等于設(shè)備的寬度（下面將會討論）。大于10,000或者小于200的height值將被忽略。

為了展現(xiàn)這個性質(zhì)是如何影響頁面大小的，figure 2展示了一個web頁面，在這里，web頁面中包含一個320像素寬的圖像，但是viewport的width設(shè)置為400.

注意：如果你設(shè)置viewport的width與頁面寬度匹配而設(shè)備屏幕大小和這些尺寸不匹配的話，web頁面將仍然占滿整個屏幕，即使設(shè)個設(shè)備屏幕是低分辨率或者高分辨率的，因為Android Browser和WebView 默認將web頁面縮放到中等分辨率屏幕大?。ㄈ缤阍趂igure 2中看到的一樣，圖中對比了高分辨率和中等分辨率設(shè)備）屏幕分辨率在Defining the viewport target density中有更多討論。

自動縮放

Figure 2. 設(shè)置viewport width=400 ，開啟 "overview mode" (頁面中的圖像為 320 像素寬).

除了將viewport尺寸定義為精確的數(shù)值以外，你還可以將其設(shè)置為永遠和設(shè)備屏幕尺寸匹配，即將viewport的height和width分別賦值為device-height 和device-width。這在你開發(fā)一個有著活動大小的web應(yīng)用的時候是非常合適的，這能使這個web應(yīng)用的頁面好像是固定的（和每個屏幕寬度都精確匹配）。例如：

Figure 3. 設(shè)置 viewport width=device-width or initial-scale=1.0的web頁面.

設(shè)置viewport尺寸永遠和屏幕尺寸匹配結(jié)果如figure 3所示。需要注意的是，這樣的設(shè)置會導(dǎo)致圖片縮放到與屏幕匹配，即使當前設(shè)備和target density（默認情況下是中等分辨率）并不匹配。因此，figure 3中的高分辨率設(shè)備的圖片在中等分辨率的設(shè)備上放大了，以便和屏幕寬度匹配。

注意：如果你希望device-width 和 device-height和設(shè)備的物理屏幕的像素匹配，而不是通過縮放web頁面來和target density匹配，那么你就必須包含一個target-densitydpi性質(zhì)并將其賦值為 device-dpi。這在Defining the viewport density中將會有更多討論。否則，只使用device-width 和 device-height來定義viewport大小的話會讓你的頁面自動適應(yīng)每個屏幕，但是你的圖片也會縮放以便適應(yīng)不容屏幕分辨率。

定義viewport規(guī)模

Viewport規(guī)模確定了頁面的縮放程度。Viewport性質(zhì)能讓你以下面的方式指定頁面縮放程度：

初始縮放（initial-scale）

即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數(shù)。例如，如果你設(shè)置初始縮放為“1.0”，那么，web頁面在展現(xiàn)的時候就會以target density分辨率的1:1來展現(xiàn)。如果你設(shè)置為“2.0”，那么這個頁面就會放大為2倍。

默認的初始縮放值是通過計算讓頁面和viewport大小匹配。因為默認viewport寬度是800像素，如果設(shè)備屏幕分辨率寬度小于800，那么初始縮放值在默認情況下是小于1.0的，以便和屏幕上的800像素寬的頁面匹配。

最小縮放（minimum-scale）

即允許的最小縮放程度。這是一個浮點值，用以指出頁面大小與屏幕大小相比的最小乘數(shù)。例如，如果你將這個值設(shè)置為“1.0”，那么這個頁面將不能縮小，因為最小值和 target density為1:1的關(guān)系。

***縮放（maximum-scale）

即允許的***縮放程度。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的***乘數(shù)。例如，如果你將這個值設(shè)置為“2.0”，那么這個頁面與target size相比，最多能放大2倍。

用戶調(diào)整縮放（user-scalable）

即用戶是否能改變頁面縮放程度。如果設(shè)置為yes則是允許用戶對其進行改變，反之為no。默認值是yes。如果你將其設(shè)置為no，那么minimum-scale 和 maximum-scale都將被忽略，因為根本不可能縮放。

所有的縮放值都必須在0.01–10的范圍之內(nèi)。

例如：

這個元數(shù)據(jù)將初始縮放值定義為和viewport的target density相比為滿屏。

定義viewport的target density

一個屏幕像素密度是由屏幕分辨率決定的，通常定義為每英寸點的數(shù)量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多。Android Browser和WebView默認屏幕為中像素密度。

因為默認target density是中像素密度，因此當用戶擁有一個低像素或者高像素密度的屏幕時，Android Browser和 WebView會縮放頁面，以便它們能在中等像素密度的屏幕以合適的大小展示。更具體來說，Android Browser和 WebView會在高像素密度設(shè)備上將頁面放大約1.5倍（因為高像素密度設(shè)備上的像素點更?。诘拖袼孛芏仍O(shè)備上將頁面縮小為約0.75倍（因為低像素密度設(shè)備上的像素點更大）。

由于默認縮放，figure 1,2,3展現(xiàn)了同樣物理大小的web頁面在高像素密度設(shè)備和中等像素密度設(shè)備上的效果（高像素密度設(shè)備上的web頁面放大到實際的1.5倍，以便和target density匹配）。這會給圖像帶來一些問題。比如，盡管一個圖像在中等像素密度和高像素密度設(shè)備上看起來大小一樣，但是高像素密度設(shè)備上的圖像看起來更為模糊，因為這個圖像本來是為320像素寬而設(shè)計的，但卻被拉到了480像素寬。

Figure 4. 設(shè)置 viewport width=device-width ， target-densitydpi=device-dpi的web頁面.

你可以通過使用viewport的target-densitydpi性質(zhì)來改變目標屏幕像素密度。可以賦給它的值如下所列：

device-dpi –使用設(shè)備原本的 dpi 作為目標 dp。不會發(fā)生默認縮放。
high-dpi – 使用hdpi 作為目標 dpi。中等像素密度和低像素密度設(shè)備相應(yīng)縮小。.
medium-dpi – 使用mdpi作為目標 dpi。高像素密度設(shè)備相應(yīng)放大，像素密度設(shè)備相應(yīng)縮小。這是默認的target density.
low-dpi -使用mdpi作為目標 dpi。中等像素密度和高像素密度設(shè)備相應(yīng)放大。
- 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。

例如，為了防止Android Browser和WebView 根據(jù)不同屏幕的像素密度對你的頁面進行縮放，你可以將viewport的target-densitydpi 設(shè)置為 device-dpi。當你這么做了，頁面將不會縮放。相反，頁面會根據(jù)當前屏幕的像素密度進行展示。在這種情形下，你還需要將viewport的width定義為與設(shè)備的width匹配，這樣你的頁面就可以和屏幕相適應(yīng)。例如：

Figure 4 展示了使用這些設(shè)置的一個web頁面——在高像素密度設(shè)備上，這個頁面看起來小一些了，因為它的物理像素點比中等像素密度設(shè)備上的像素點要小，而又沒有縮放發(fā)生，因此320像素寬的圖像在兩個界面上都只占用了320像素寬。（如果你想要根據(jù)屏幕像素密度來定制你的web頁面的話，你就應(yīng)該如此定義viewport，并使用CSS 或者 JavaScript來為不同像素密度設(shè)備提供不同圖像。）

針對不同像素密度應(yīng)用CSS

Android Browser和WebView支持一個CSS的media特性，讓你能為特定像素密度的設(shè)備來創(chuàng)建styles——這個media特性就是 -webkit-device-pixel-ratio CSS media feature。你賦給這個特性的值應(yīng)該是”0.75″, “1″, 或 “1.5″，來分別指出styles是針對低像素密度、中等像素密度和高像素密度的。

例如：你可以為不容像素密度創(chuàng)建樣式列表stylesheets如下：

Figure 5. 使用CSS中的 -webkit-device-pixel-ratio 來為不同分辨率的屏幕指定不同web頁面。注意在hdpi設(shè)備中使用的是一幅不同的圖片。

或者，在一個樣式表中指定不同的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是將圖片應(yīng)用于中等像素密度的設(shè)備，以支持Android2.0以下的設(shè)備，這些設(shè)備是不支持-webkit-device-pixel-ratio的。

根據(jù)你設(shè)置的viewport性質(zhì)不同，你要調(diào)整的對不同像素密度的styles的風格也應(yīng)該不同。為了讓你的頁面能在不同像素密度下都有合適的styles，你需要將viewport的寬度設(shè)置為與設(shè)備匹配。即：

通過這種方式，Android Browser和 WebView就不會對你的頁面進行縮放，并且viewport的width能與設(shè)備的width精確匹配。這一設(shè)置效果如figure 4所示。然而，通過使用-webkit-device-pixel-ratio ，你可以應(yīng)用不同的styles。例如，在figure 5中，展示了一個使用如上viewport設(shè)置并使用了一些CSS的頁面，在這個CSS中，定義將高分辨率的圖像用于高像素密度的屏幕。

針對不同像素密度應(yīng)用 JavaScript

Android Browser和 WebView支持一個文檔對象模型（DOM）特性，可以讓你查詢當前設(shè)備的像素密度——即DOM的window.devicePixelRatio 特性。這個特性的值指定了當前設(shè)備的縮放因子。例如，如果window.devicePixelRatio的值是“1.0”，則這個設(shè)備是一個中等像素密度的設(shè)備，默認不縮放；如果window.devicePixelRatio的值是“1.5”，則這個設(shè)備是一個高像素密度的設(shè)備，默認以1.5倍縮放；如果window.devicePixelRatio的值是“0.75”，則這個設(shè)備是一個低像素密度的設(shè)備，默認以0.75倍縮放。當然，Android Browser 和WebView 是根據(jù)頁面的target density進行縮放的，和上文討論的一樣，其默認target是中等像素密度，但是你可以修改這個target，調(diào)整你的頁面在不同屏幕分辨率下的縮放方式。

例如：你可以像下面這樣通過Javascript來查詢設(shè)備像素密度：

 
 
 
 
  
  
  
  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");
  
  
  
   }

原文鏈接：Targeting Screens from Web Apps

新聞名稱：AndroidWebApp官方文檔翻譯第二章:屏幕適配
文章轉(zhuǎn)載：http://m.fisionsoft.com.cn/article/dpeejoo.html