在 Web 应用中支持不同屏幕

由于 Android 可在各种屏幕尺寸和像素密度的设备上使用，因此请在网页设计中考虑这些因素，以便您的页面大小合适。 WebView 支持 DOM、CSS 和元标记功能，以帮助您适当地呈现网页内容。

在针对 Android 设备定位网页时，需要考虑两个主要因素

视口
视口是提供网页可绘制区域的矩形区域。您可以指定多个视口属性，例如其大小和初始缩放比例。最重要的是视口宽度，它定义了从网页的角度来看可用的水平像素总数——可用的 CSS 像素数。
屏幕密度
WebView 类和 Android 上的大多数 Web 浏览器将您的 CSS 像素值转换为与密度无关的像素值，因此您的网页显示在与中等密度屏幕相同的大小上——大约 160 dpi。但是，如果图形是网页设计的重要元素，请注意在不同密度下发生的缩放。例如，在 320 dpi 屏幕上宽度为 300 px 的图像会进行放大——它每个 CSS 像素使用更多的物理像素。这可能会产生模糊和像素化等伪影。为简单起见，Android 将大多数较小的屏幕密度合并到几个通用类别中：小、中和大。要了解有关屏幕密度的更多信息，请阅读 支持不同的像素密度。

参考以下相关资源

指定视口属性

视口是绘制网页的区域。虽然视口在完全缩小时的总可见区域与屏幕大小匹配，但视口具有自己的像素尺寸，并将其提供给网页。例如，虽然设备屏幕的物理宽度可能为 480 像素，但视口的宽度可以为 800 像素。这允许在 800 像素宽处设计的网页在视口比例为 1.0 时在屏幕上完全可见。

Android 上的大多数 Web 浏览器（包括 Chrome）默认将视口设置为较大的尺寸。此 _宽视口模式_ 约为 980 px 宽。许多浏览器还默认尽可能缩小以显示完整的视口宽度，称为 _概述模式_。

您可以使用文档 <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");
}