讓網頁應用程式支援各種螢幕大小

由於 Android 適用於各種螢幕大小和像素密度的裝置， 考量這些因素，確保網頁的大小適當。 WebView 支援 DOM、CSS 和中繼標記 功能，幫助您正確顯示網頁內容。

為 Android 裝置指定網頁時，需考量兩項主要因素 用於：

檢視點
可視區域是指矩形區域，負責為網頁提供可繪製區域。個人中心 可指定數個可視區域屬性，例如其大小和初始縮放。最重要的是 可視區域寬度，定義出網頁中可用的水平像素總數 視角 - 可用的 CSS 像素數量。
螢幕密度
Android 上的 WebView 類別和大多數網路瀏覽器會轉換 CSS 像素值 與密度無關像素值，所以您的網頁顯示大小會與 中密度螢幕—約 160 dpi。不過，如果圖片是網站的重要元素 網頁設計之後，請留意在不同密度上的縮放情形。例如圖片、 320 dpi 螢幕的寬度為 300 px，會縮短每個 CSS 使用的實體像素數量 像素。這可能會產生模糊、像素化等假影。為了方便起見，Android 會收合 大部分螢幕密度都會納入以下幾個一般類別：小、中、大。學習 如要進一步瞭解螢幕密度，請參閱 支援不同的像素密度。

請參閱下列相關資源：

指定可視區域屬性

可視區域是指繪製網頁的區域。雖然可視區域 區域符合螢幕大小則完全縮小時，可視區域有自己的像素 網頁上可用的維度例如，雖然裝置螢幕 實體寬度為 480 像素，可視區域的寬度則為 800 像素。這樣一來，系統就會 設計為 800 像素時，可視區域比例為 1.0 時，會完整顯示在畫面上。

大多數 Android 上的網路瀏覽器 (包括 Chrome) 預設將可視區域設定為大尺寸。 這個 _寬可視區域模式_約為 980 像素。此外，許多瀏覽器 。

你可以定義網頁可視區域的屬性，例如寬度和初始縮放 請在文件中使用 <meta name="viewport" ...> 標記 <head>。

以下語法會顯示所有支援的可視區域屬性和值的類型 逐一接受：

<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"]
          " />

舉例來說，下列 <meta> 標記指定可視區域寬度符合 裝置螢幕寬度以及縮放功能已停用：

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

針對行動裝置最佳化網站時，您通常會將寬度設為 "device-width" 讓廣告大小完全符合所有裝置，然後使用 CSS 媒體查詢來 靈活調整版面配置，以配合不同的螢幕大小

使用 CSS 指定裝置密度

WebView 支援 -webkit-device-pixel-ratio，這是 CSS 媒體 功能，為特定螢幕密度建立樣式。您要套用到 地圖項目必須為 0.75、1 或 1.5，表明樣式適用於低、中、或 並分別支援高密度螢幕

您可以為每個密度建立個別的樣式表：

<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" />

或是在一個樣式表中指定不同的樣式：

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

如要進一步瞭解如何處理不同的螢幕密度 (尤其是圖片)，請參閱 高 DPI 圖片，以供 可變像素密度：

使用 JavaScript 指定裝置密度

WebView 支援 window.devicePixelRatio，這種 DOM 屬性 可讓您查詢目前裝置的密度。這個屬性的值會指定縮放比例 計算目前裝置採用的係數如果 window.devicePixelRatio 的值為 1.0， 系統就會將該裝置視為 medium 像素密度裝置，預設不會套用任何縮放設定。如果 這個值為 1.5，則系統會將該裝置視為 high 像素密度裝置，而網頁大小會調整為 1.5 倍 預設值。如果值為 0.75，系統就會將該裝置視為低密度裝置，而該網頁為 預設值為 0.75 倍。

Android 瀏覽器和 WebView 的縮放比例取決於網頁的 目標密度如定義檢視點一節所述 目標密度，預設目標為 medium 像素密度，但您可以變更目標 網頁大小會依據不同螢幕密度縮放。

以下舉例說明如何使用 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");
}