专题 - Web应用->Web应用中适配不同屏幕

来源：互联网发布：linux samba 登录编辑：程序博客网时间：2024/04/29 22:32

本文原文为：Supporting Different Screens in Web Apps，主要讲解了在web页面里如何适配不同的屏幕。

从文档里边看，WebView支持的density目前只有ldpi, mdpi, hdpi

因为Android可以在多种屏幕尺寸和像素密度的设备上运行，在web设计中你需要考虑这些因素以便使你的web页面总是以合适的尺寸显示。

当你的web页面的目标为Android设备时，你需要考虑下面的两个主要因素：

视图
对于你的web页面来说，视图是可以提供可以绘图的矩形区域。你可以指定几个视图的属性，比如它的尺寸和初始缩放百分比。最重要的是视图的宽度，它定义了web页面 (CSS像素可用的数目) 的可用水平像素的总数目。

屏幕密度
Android上的WebView类和大部分的web浏览器会将你的CSS像素值转换为与密度无关的像素值，所以你的web页面会以与中等屏幕密度（medium-density）（大约160dpi）相同的可视尺寸显示。但是，如果图像在你的web设计中是一个重要的元素，你应该密切注意在不同屏幕密度上发生的缩放。因为一个300像素宽的图片在一个320dpi的屏幕上会被等比例放大（即每个CSS像素使用更多的物理像素），这将会导致失真（模糊与像素化）。

指定视图的属性

视图是你的web页面绘图的区域。虽然当任意缩放时，视图的总的可见区域匹配屏幕的尺寸，但是视图拥有它自己的像素尺寸供web页面使用。例如，即使一个设备的屏幕的宽度上有480个物理像素，但是视图则可以用800像素的宽度。当视图缩放比例为1.0时，这可以使针对800像素宽度设计的web页面在屏幕上可以完全显示。Android上的大部分web浏览器（包括Chrome）默认给视图设置一个大的尺寸（成为”wide viewport mode”，大约为980像素宽）。默认情况下，许多浏览器同样尽可能地缩小以显示全部视图的宽度（称为”overview mode”）。

注意：当你的页面在WebView里渲染时，默认情况下它没有使用wide viewport mode（页面以整页缩放显示）。你可以调用setUseWideViewPort方法启用wide viewport mode。

你可以在web页面中定义视图的属性，如宽度和初始缩放比例，通过在文档的<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媒体查询灵活地适应布局以适配不同的屏幕尺寸。

当且仅当你确定你的web页面布局是灵活的并且内容会适应小屏幕的宽度，你才可以禁值用户缩放。

使用CSS适配设备密度

Android浏览器和WebView支持一个CSS媒体特性，即允许你为指定的屏幕密度创建对应的样式 - CSS媒体特性-webkit-device-pixel-ratio。这个属性的值应该取”0.75”, “1”或者”1.5”，分别指定样式应用于低（low density）、中（medium density）、高（high density）屏幕密度的设备。

例如，你可以针对每种密度创建不同的样式表：

<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);    }}

有关处理不同屏幕密度的更多信息，尤其是图片，见High DPI Images for Variable Pixel Densities。

使用JavaScript适配设备密度

Android浏览器和WebView支持一个DOM属性，该属性允许你查询当前设备的密度 - DOM属性window.devicePixelRatio。这个属性的值指定了用于当前设备的缩放系数。例如window.devicePixelRatio的值是”1.0”，那么当前设备被认为是中等密度设备并且默认不进行缩放；如果值为”1.5”，那么当前色设备被认为是高密度设备并且默认对页面放大1.5倍；如果值为”0.75”，那么当前设备被认为是低密度设备并且默认对页面缩小0.75倍。当然，Android浏览器和WebView的缩放是基于web页面的目标密度 - 这一点在使用CSS适配设备密度部分有描述，默认目标是中等密度，但是你可以更改目录以此调整你的web页面对于不同的屏幕密度是如何缩放的。

例如，这里示例了如何使用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");}

回到专题 Web应用

0 0