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