在 Web 应用中支持不同的屏幕

由于 Android 适用于具有各种屏幕尺寸和像素密度的设备,因此请在设计网页时充分考虑这些因素,使网页的大小合适。WebView 支持 DOM、CSS 和元标记功能,可帮助您正确呈现网页内容。

在针对搭载 Android 的设备定位网页时,需要考虑两个主要因素:

视口
视口是为网页提供可绘制区域的矩形区域。您可以指定多个视口属性,例如其尺寸和初始缩放比例。最重要的是视口宽度,它定义了从网页视角可用的水平像素总数,即可用的 CSS 像素数量。
屏幕密度
WebView 类和 Android 上的大多数网络浏览器会将您的 CSS 像素值转换为密度无关像素值,因此您的网页以可感知的尺寸显示,与中密度屏幕相同(约为 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,则设备会被视为中密度设备,默认不会应用缩放。如果值为 1.5,则设备被视为高密度设备,默认情况下,页面会缩放至 1.5 倍。如果值为 0.75,则设备被视为低密度设备,页面默认缩放至 0.75 倍。

Android 浏览器和 WebView 应用的缩放基于网页的目标密度。如定义视口目标密度部分所述,默认目标为中密度,但您可以更改此目标,以影响网页针对不同屏幕密度进行缩放的方式。

例如,以下是使用 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");
}