日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
AndroidWebApp官方文檔翻譯第二章:屏幕適配

概覽

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

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

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

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

當(dāng)為Android設(shè)備設(shè)計(jì)頁(yè)面時(shí)，有兩個(gè)需要考慮的基本因素：

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

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

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

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

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

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

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. Example 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5.

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.        content=" 
    3. 
  
  
  
  
  3.            height = [pixel_value | device-height] , 
    4. 
  
  
  
  
  4.            width = [pixel_value | device-width ] , 
    5. 
  
  
  
  
  5.            initial-scale = float_value , 
    6. 
  
  
  
  
  6.            minimum-scale = float_value , 
    7. 
  
  
  
  
  7.            maximum-scale = float_value , 
    8. 
  
  
  
  
  8.            user-scalable = [yes | no] , 
    9. 
  
  
  
  
  9.            target-densitydpi = [dpi_value | device-dpi | 
    10. 
  
  
  
  
  10.                                 high-dpi | medium-dpi | low-dpi] 
    11. 
  
  
  
  
  11.            " /> 
    12.

下面的部分討論了如何使用這些viewport性質(zhì)以及可以賦給這些性質(zhì)的值到底是怎樣。

定義viewport大小

 

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

Viewport的height 和 width性質(zhì)讓你可以指定viewport大小（即頁(yè)面在擴(kuò)張到屏幕之前可見的大?。?。

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

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

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

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

自動(dòng)縮放

 

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

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

 
 
 
 
    
  
  
  
  
  1.   
    2.

 

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

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

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

定義viewport規(guī)模

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

初始縮放（initial-scale）

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

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

最小縮放（minimum-scale）

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

***縮放（maximum-scale）

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

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

即用戶是否能改變頁(yè)面縮放程度。如果設(shè)置為yes則是允許用戶對(duì)其進(jìn)行改變，反之為no。默認(rèn)值是yes。如果你將其設(shè)置為no，那么minimum-scale 和 maximum-scale都將被忽略，因?yàn)楦静豢赡芸s放。

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

例如：

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

定義viewport的target density

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

因?yàn)槟J(rèn)target density是中像素密度，因此當(dāng)用戶擁有一個(gè)低像素或者高像素密度的屏幕時(shí)，Android Browser和 WebView會(huì)縮放頁(yè)面，以便它們能在中等像素密度的屏幕以合適的大小展示。更具體來說，Android Browser和 WebView會(huì)在高像素密度設(shè)備上將頁(yè)面放大約1.5倍（因?yàn)楦呦袼孛芏仍O(shè)備上的像素點(diǎn)更?。?，而在低像素密度設(shè)備上將頁(yè)面縮小為約0.75倍（因?yàn)榈拖袼孛芏仍O(shè)備上的像素點(diǎn)更大）。

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

 

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

你可以通過使用viewport的target-densitydpi性質(zhì)來改變目標(biāo)屏幕像素密度?？梢再x給它的值如下所列：

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

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

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

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.  
    4.

 

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

或者，在一個(gè)樣式表中指定不同的styles：

 
 
 
 
    
  
  
  
  
  1. #header { 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. background:url(medium-density-image.png); 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. @media screen and (-webkit-device-pixel-ratio: 1.5) { 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. /* CSS for high-density screens */ 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. #header { 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. background:url(high-density-image.png); 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17. } 
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19. @media screen and (-webkit-device-pixel-ratio: 0.75) { 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. /* CSS for low-density screens */ 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. #header { 
    24. 
  
  
  
  
  24.  
    25. 
  
  
  
  
  25. background:url(low-density-image.png); 
    26. 
  
  
  
  
  26.  
    27. 
  
  
  
  
  27. } 
    28. 
  
  
  
  
  28.  
    29. 
  
  
  
  
  29. } 
    30.

注意：#header默認(rèn)的style是將圖片應(yīng)用于中等像素密度的設(shè)備，以支持Android2.0以下的設(shè)備，這些設(shè)備是不支持-webkit-device-pixel-ratio的。

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. if (window.devicePixelRatio == 1.5)
    2. 
  
  
  
  
  2.  {
    3. 
  
  
  
  
  3.    alert("This is a high-density screen"); }
    4. 
  
  
  
  
  4.  else if (window.devicePixelRatio == 0.75)
    5. 
  
  
  
  
  5.  {
    6. 
  
  
  
  
  6.    alert("This is a low-density screen");
    7. 
  
  
  
  
  7.  }  
    8.

原文鏈接：Targeting Screens from Web Apps


本文標(biāo)題：AndroidWebApp官方文檔翻譯第二章:屏幕適配
本文路徑：http://www.dlmjj.cn/article/dpeejoo.html