Android API Guides---Supporting Different Screens in Web Apps

来源：互联网发布：python 最大公约数编辑：程序博客网时间：2024/05/21 12:56

由于Android可在设备与各种屏幕尺寸和像素密度的，你应该考虑这些因素，你的网页设计让你的网页总是出现在适当的大小。

当目标网页的Android设备，有您应该考虑两个主要因素：

视口
视口是为你的网页提供了一个可绘制区域的矩形区域。可以指定几个视区的属性，例如其尺寸和初始规模。最重要的是观察口的宽度，其限定可从视图（可用CSS像素的数量）的网页的点水平像素的总数。
屏幕密度
web视图类和大多数浏览器在Android上转换你的CSS像素值密度独立的像素值，让你的网页出现在相同的感知大小为中等密度的屏幕（约160dpi）。但是，如果显卡是你的网页设计的重要元素，你应该密切关注的是，不同密度时的缩放比例，因为320dpi屏幕上300像素宽的图像将被放大（使用每CSS像素更多的物理像素），能产生伪影（模糊和像素化）。
指定视窗属性

视口是在你的网页被绘制的区域。虽然视口的总可视面积放大时全部拉出屏幕的尺寸相匹配，视口都有自己的像素尺寸，它使提供给网页。例如，尽管一个设备屏幕可能具有的480个像素的物理宽度，视口可以具有800像素的宽度。这允许网页设计在800像素宽为完全可见的屏幕上时，视口比例是1.0。在Android（包括Chrome）大多数Web浏览器的视口（约980px全称为“广视模式”），默认设置为大尺寸。许多浏览器也缩小尽可能默认情况下，可显示完整的视口宽度（称为“概览模式”）。

注意：当你的网页在网页视图呈现，它不使用默认的宽视模式（页面出现在全变焦）。你能使用setUseWideViewPort宽视模式（）。

您可以为您的网页视口的属性，如宽度和初始缩放级别，使用您的文档中的<META NAME =“视口”...>标记<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>

在优化您的网站为移动设备，通常应设置宽度为“设备宽度”，大小正好适合在所有设备上，然后使用CSS媒体查询灵活适应的布局，以适应不同的屏幕尺寸。

注意：您应该禁用的用户比例只有当你确定你的网页布局灵活，内容适合小屏幕的宽度。

用CSS定位设备密度

Android浏览器和WebView中支持CSS媒体功能，允许您创建特定屏幕密度-的-webkit-设备的像素比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
Android浏览器和WebView中支持DOM属性，可以让你查询当前设备 - window.devicePixelRatio DOM属性的密度。该属性的值指定用于当前装置的缩放因子。例如，如果window.device像素比的值是“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");}

0 0