由于 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");
}