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

由於 Android 支援各種螢幕大小和像素密度的裝置,因此在網頁設計中請考量這些因素,才能讓網頁擁有適當大小。WebView 支援 DOM、CSS 和中繼標記功能,協助您適當轉譯網頁內容。

為網頁指定 Android 裝置時,請考量下列兩項主要因素:

可視區域
可視區域是指可為網頁提供可繪製區域的矩形區域。您可以指定多個可視區域屬性,例如尺寸和初始縮放比例。最重要的是可視區域寬度,這會定義從網頁視角提供的水平像素總數 (也就是可用的 CSS 像素數量)。
螢幕密度
Android 的 WebView 類別和大多數網路瀏覽器會將 CSS 像素值轉換為密度獨立像素值,因此網頁的顯示方式會與 medium 像素密度的螢幕尺寸相同 (約 160 dpi)。不過,如果圖形是網頁設計的重要元素,請注意不同密度的縮放比例。舉例來說,在 320 dpi 螢幕上,寬度為 300 像素的圖片會放大,而每個 CSS 像素所使用的實體像素會較高。這會產生模糊和像素化等失真現象。為方便起見,Android 會將較小型的螢幕密度縮減為一些一般類別:小、中、大型。如要進一步瞭解螢幕密度,請參閱「支援不同的像素密度」。

請參閱下列相關資源:

指定可視區域屬性

可視區域是網頁繪製的區域。雖然可視區域的總可見區域與螢幕縮小時的大小一致,但可視區域會有專屬的像素尺寸,可供網頁使用。舉例來說,雖然裝置螢幕的實體寬度可能為 480 像素,但可視區域寬度可以設為 800 像素。這樣一來,當可視區域比例為 1.0 時,寬度為 800 像素的網頁就能完整顯示在螢幕上。

Android 大多數的網路瀏覽器 (包括 Chrome) 都預設為將可視區域設為大尺寸。這個_寬視區域模式_的寬度約為 980 像素。許多瀏覽器預設會盡可能縮小地圖以顯示完整可視區域寬度 (稱為「總覽模式」_)。

您可以在文件 <head> 中使用 <meta name="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"]
          " />

舉例來說,下列 <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,則系統會將裝置視為高密度裝置,而網頁的縮放比例預設為 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");
}