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

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

在针对采用 Android 的设备定位您的网页时，需要考虑两个主要因素 用于：

视口
视口是为网页提供可绘制区域的矩形区域。您 可以指定多个视口属性，如尺寸和初始缩放比例。最重要的是 视口宽度，用于定义网页上可用水平像素的总数 视角—可用 CSS 像素的数量。
屏幕密度
WebView 类和 Android 设备上的大多数网络浏览器都会转换 CSS 像素值 非密度制约像素值，这样网页可感知的尺寸与 中密度屏幕 - 约 160 dpi。不过，如果图形是网站的重要元素 网页设计时，请注意不同密度的缩放比例。例如，一幅图像 宽度为 300 像素且在 320 dpi 屏幕上放大的像素 - 它会对每个 CSS 使用更多的物理像素 Pixel。这可能会造成模糊和像素化等伪影。为简单起见，Android 会 将大多数较小屏幕密度分为几个常规类别：小、中和大。学习内容 详细了解屏幕密度，请参阅 支持不同的像素密度。

请参阅以下相关资源：

指定视口属性

视口是您绘制网页的区域。虽然该视口的 区域大小与屏幕尺寸相符，视口有自己的像素 向网页提供的各种尺寸例如，虽然设备屏幕可能有 实际宽度为 480 像素，视口宽度可以为 800 像素。这样，网页 当视口比例为 1.0 时，宽度为 800 像素的屏幕会完全显示。

大多数人 Android 设备上的网络浏览器（包括 Chrome）默认会将视口设为较大尺寸。 此 _宽视口模式_ 的宽度大约为 980 像素。许多浏览器还会缩小 以显示整个视口宽度，称为 _概览模式_。

<ph type="x-smartling-placeholder">

您可以为网页定义视口的属性，例如宽度和初始缩放比例 在文档中使用 <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 媒体查询 灵活地调整布局，以适应不同的屏幕尺寸。

<ph type="x-smartling-placeholder">

使用 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");
}