Google 致力于为黑人社区推动种族平等。查看具体举措

支持 Web 应用中的不同屏幕

由于 Android 适用于具有各种屏幕尺寸和像素密度的设备,因此您在设计网页时应将这些因素纳入考虑范围,以便您的网页始终以合适的尺寸显示。WebView 支持各种 DOM、CSS 和元标记功能,可帮助您确保网页内容以适当方式呈现。

在针对 Android 设备开发网页时,您应该考虑以下两个主要因素:

视口
视口是为网页提供可绘制区域的矩形区域。您可以指定多个视口属性,例如尺寸和初始缩放比例。最重要的是视口宽度,它从网页的角度定义了可用水平像素的总数(可用的 CSS 像素的数量)。
屏幕密度
WebView 类和 Android 上的大多数网络浏览器会将 CSS 像素值转换为密度无关像素值,以便您的网页能够以基本相同的尺寸显示为中密度屏幕(约 160dpi)。但是,如果图形是网页设计的重要元素,您应密切关注它们在不同屏幕密度上的缩放情况,因为宽度为 300px 的图片在密度为 320dpi 的屏幕上显示时会被放大(每 CSS 像素使用的物理像素会更多),这会形成模糊处理和像素化等伪像。为简单起见,Android 将大多数较小的屏幕密度归入几个常规类别:小密度、中密度和大密度。要详细了解屏幕密度,请参阅该关于屏幕密度的培训

请参阅以下相关资源:

指定视口属性

视口是您绘制网页的区域。尽管视口的总可见区域在缩放到最小时与屏幕尺寸一致,但视口具有其自己的提供给网页的像素尺寸。例如,虽然设备屏幕的物理宽度可能为 480 像素,但视口的宽度可以为 800 像素。这样,当视口的缩放比例为 1.0 时,宽度设计为 800 像素的网页便会完全显示在屏幕上。Android 上的大多数网络浏览器(包括 Chrome)默认将视口设置为较大尺寸(称为“宽视口模式”,宽度约为 980px)。默认情况下,许多浏览器都会尽可能缩小,以显示完整视口宽度(称为“概览模式”)。

注意:当您的网页在 WebView 中呈现时,默认不会使用宽视口模式(网页以完全缩放形式显示)。您可以使用 setUseWideViewPort() 启用宽视口模式。

您可以使用文档 <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 支持一项 CSS 媒体功能,即 -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 支持一个 DOM 属性,即 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");
    }