在安卓移动设备上开发网页
1.实现方式
基本上有两种方式实现在android上开发web程序，一种通过使用Android SDK开发apk，用webView实现；另一种使用web标准开发，通过网络浏览器访问.
2. 特点
a.支持viewport属性，让应用以正确的大小适应不同尺寸的屏幕
b.CSS和JavaScript支持，提供不同的风格和基于屏幕的像素密度（屏幕分辨率）的图像
所以，为Android开发一个Web应用程序可以排除屏幕支持的考虑,应为已经很容易让你的网页适应所有搭载android系统的屏幕 。
Android 的另一大特点是，可以混合WebView和APK两个一起开发一个Android客户端的应用程序。 可以定义你的Android应用程序和网页之间 的接口，允许网页中的JavaScript调用Android应用程序提供基于Web的应用程序的Android API。
针对Web应用程序的屏幕
1.针对Android设备开发网页时，有两个基本因素
a.viewport大小和缩放的网页
Android浏览器加载网页时，默认行为是在“预览模式”，它提供了一个网页缩放的角度加载页面。
可以为网页定义viewport的默认尺寸或viewport的初始缩放， 还可以控制多少用户可以放大和缩小网页。用户还可以在浏览器中设置禁用预览模式，所以不应该设置页面加载模式，应该自定义viewport大小或缩放。
b. 该设备的屏幕密度
Android 设备屏幕密度（每英寸像素数）影响网页显示的分辨率和大小。（三屏密度类别：低，中，高）。Android浏览器和WebView中, 减少缩放网页在屏 幕密度的变化。如果图片是网页设计的重要元素，你应该密切关注在不同的密度中图像的缩放，因为可以产生模糊的效果。要为所有密度的屏幕，提供最佳的视觉效 果，应该控制缩放，根据目标屏幕的密度提供资源，可以适用于不同屏幕使用的CSS或JavaScript的替代图片。
使用viewport
viewport 是网页可绘制的区域。虽然viewport可视面积和屏幕尺寸相匹配，但viewport有其自己的尺寸，确定网页的像素数量。也就是说，网页的像素数量 超过定义的viewport尺寸，而不是设备屏幕尺寸的屏幕面积。例如，虽然设备屏幕上可能有一个480像素宽，viewport可以有一个800像素 宽，这样网页设计是宽800像素完全显示在屏幕上。
可 以在HTML 网页中使用viewport属性（必须设置置在文档<HEAD>的<META>中）。可以 在<meta>中定多个viewport属性，例如，你可以定义viewport的高度和宽度，页面初始缩放，和目标屏幕密度，每个 viewport属性中的属性内容必须用逗号隔开。
例如下面的代码片断，从一个HTML文档指定viewport属性的宽度应完全匹配设备屏幕的宽度，并禁用缩放。
<head>
<title>Example</title>
<meta name=”viewport” content=”width=device-width, user-scalable=no” />
</head>
content=”width=device-width”
viewport的宽度等于设备宽度，viewport会根据屏幕宽度自动适应，并且对图片和文字进行缩放显示.
这是一个只有两个viewport属性的例子。下列语法显示所有支持的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] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
” />
定义viewport大小
定义viewport的高度和宽度属性指定viewport大小。
在 上面的介绍中提到，Android浏览器默认以“预览模式”加载页面（除非用户禁用）.如果viewport的宽度为800像素, 您的网页指定其大小是 宽320像素，那么你的网页小于可见屏幕. 为了避免缩放效果，你应该明确定义viewport宽度,使其与设计的网页的宽度相匹配。
例如，如果您的网页设计是整整320像素宽，那么你可能要指定视口宽度大小：
<meta name=”viewport” content=”width=320″ />
如果指定viewport的宽度,那么图片将不会被缩放,如果viewport 大于屏幕的实际像素,那么图片将不能完全显示,需要拖动才能看到完整效果.
在这种情况下，您的网页完全适合屏幕的宽度，因为网页的宽度和视口的宽度是相同的。
注：宽度值大于10,000和大于（或等于）320被忽略, 结果在设备宽度等于一个值。然后高度值大于10,000或小于200的也被忽略。
注： 默认情况下, 如果你设置了viewport的宽度匹配您的网站页面宽度和设备的屏幕宽度并没有符合的尺寸，然而网页仍然适合高或低密度的屏幕. 因为 Android浏览器会以一个中等密度屏幕的大小相匹配的WebView加载网页.屏幕密度讨论了更多的定义viewport的目标密度。
自动调整大小
指 定viewport尺寸精确像素的替代品，你可以设置viewport的大小总是匹配设备的屏幕尺寸，定义viewport属性的高度 和宽度与设备高度 和设备宽度值匹配。当你正在开发一个web应用，具有未知的宽度（不固定宽度），但你希望它完美契合每一个屏幕，如网页的宽度相互匹配屏幕。例如：
<meta name=”viewport” content=”width=device-width” />
width=device- width, 和viewport的宽度匹配，无论当前屏幕宽度是不是指定的大小。重要的是要注意到，在缩放以适合屏幕大小的图像时，当前的设备不匹配目 标密度，默认中密度。因此，对高密度设备在显示的图像进行缩放，为了配合中密度屏幕屏幕的宽度。
网页宽度与viewport设备的宽度或初始缩放为1.0。
注：如果不是用缩放网页来匹配设备尺寸,必须指定目标设备densitydpi。这是讨论有关定义viewport密度的.否则，简单地使用设备的高度和宽度定义viewport的大小，使您的网页适合每个设备的屏幕，但您的图像缩放，为了适应不同的屏幕密度。
定义viewport比例
viewport的缩放定义适用于网页的缩放级别。Viewport的属性允许您指定您的网页缩放在以下范围：
initial-scale 初始缩放
本页面的初始缩放。该值是一个浮点型数值,表示网页的大小，相对与屏幕尺寸。
例如，如果你设置的初始缩放为“1.0”，然后网页显示符合该决议的目标密度 1到1。如果设置为“2.0”，然后在页面（放大）放大了2倍。
默认的初始缩放计算，以适应viewport大小的网页。因为默认viewport的宽度是800像素，如果该设备的屏幕分辨率是小于800像素宽，最初的规模是小于1.0，默认情况下，以适应屏幕上的800个像素宽的页面。
minimum-scale 最小缩放
允许的最低缩放。该值是一个浮点型，表示值最低，为你的网页大小的屏幕尺寸相对。例如，如果你设置这个“1.0”，然后在页面不能缩小，因为最小尺寸与目标密度是1到1 。
maximum-scale 最大缩放
规模最大允许页面。值是一个浮点数，表示最大值的网页大小，屏幕尺寸相对。例如，如果你设置这个“2.0”，然后在页面不能放大2倍以上大小的目标。
user-scalable 用户可扩展性
用户是否可以更改网页的缩放（放大和缩小）。设置为 yes 允许缩放和no禁止缩放。默认情况下是允许的。如果你设置为no，然后最小缩放和最大缩放的值将被忽略，因为无法缩放。
所有缩放的值必须是0.01-10范围内。
例如：
<meta name=”viewport” content=”initial-scale=1.0″ />
此数据设置的初始缩放为全尺寸，相对viewport的目标密度。
定义viewport的目标密度
设 备的屏幕上的密度是根据屏幕的分辨率，点每英寸（dpi）的数量界定。这是由Android支持三种屏密度：低（LDPI），中等（MDPI）的，和高 （MDPI）的。密度低的屏幕可减少每英寸像素数，而高密度的屏幕每英寸的像素越多（中等密度的屏幕相比）。Android浏览器的WebView默认的 是中密度屏幕。
因 为默认的目标密度是中等的，当用户有低或高密度屏，Android浏览器和设备的WebView缩放网页（有效放大的页面），让他们合适的显示，以中等密 度大小相匹配屏幕。更具体地说，Android浏览器WebView以约1.5倍的值缩放高密度屏（因为其屏幕像素更小）和低密度屏幕上的网页（约 0.75倍的缩放，因为它的屏幕像素是更大）。
由 于此默认缩放，数字1，2和3显示在相同的物理尺寸，例如网页上的高，中密度设备（高密度的设备显示网页默认的比例系数是1.5倍大于实际像素分辨率，相 匹配的目标密度）。可以使您的图片出现一些不好的效果。例如，虽然显示在中等和高密度的设备的大小相同，高密度的设备上的图像出现模糊，因为被设计为 320像素宽，但是在480像素显示。
您可以更改为您的网站页面使用的目标屏幕密度的目标densitydpi viewport属性。它接受以下值：
device-dpi
设备的DPI -使用为目标的DPI设备的本地DPI。默认缩放从未发生。
high-dpi 高dpi -使用为目标DPI hdpi。中等和低密度屏幕适当缩减。
medium-dpi 中DPI -使用为目标DPI MDPI。高密度屏扩展和低密度屏幕缩小。这是默认的目标密度。
low-dpi 低DPI – LDPI使用为目标DPI。适当扩大中等和高密度的屏幕。
<VALUE> -指定使用为目标的DPI DPI值。值必须在70-400范围内。
例 如，让网页根据不同的屏幕密度缩放，以防止Android浏览器和WebView中默认设置，设定的目标densitydpi Viewport属性设备 dpi的。当你这样做，将不进行缩放页面。相反，页面显示在当前屏幕的密度的大小相匹配。在这种情况下，你也应该定义Viewport宽度相匹配的设备宽 度，使您的网页自然适合屏幕大小。例如：
<meta name=”viewport” content=”target-densitydpi=device-dpi, width=device-width” />
针对设备密度与CSS
Android浏览器和WebView中支持的CSS媒体功能，使您可以创建特定的屏幕密度的样式CSS -WebKit的设备像素比媒体功能。此功能适用于你的价值应该是无论是“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” />
<link rel=”stylesheet” media=”screen and (-webkit-device-pixel-ratio: 0.75)” href=”ldpi.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);
}
}
注：＃头为默认样式,适用于大于2.0，以支持设备运行的Android版本, 少的中等密度设备设计的样式，不支持WebKit的设备像素比媒体功能。
取决于你如何定义你的viewport属性的类型风格，你可能需要根据屏幕的密度调整。提供完全定制的样式，为每个受支持的密度修改您的网页，你应该设置你的viewpor属性，使viewpor的宽度和密度匹配设备。
这就是：
<meta name=”viewport” content=”target-densitydpi=device-dpi, width=device-width” />
这样一来，Android浏览器和WebView中不执行您的网页缩放和viewport的宽度相匹配的屏幕宽度完全相同。然而，通过添加一些自定义的CSS使用的WebKit的设备像素比媒体功能，可以应用不同的样式。
针对设备密度与JavaScript
Android 浏览器和WebView中支持一个DOM属性，使您可以查询当前设备的密度window.devicePixelRatio DOM属性。这个属性的值指 定当前设备使用的比例因子。例如，如果值window.devicePixelRatio是“1.0”，则该设备被认为是中等密度的设备，默认情况下应 用，如果值是“1.5”，则该设备被认为是一种高密度设备和页面缩放默认情况下的1.5倍;如果值是“0.75”，则该设备被认为是一个低密度设备和页面 缩放默认的0.75倍。当然了，Android浏览器和缩放的WebView APPLY是网页的目标密度为-的有关节中描述的基础定义的视口目标密度， 默认的目标是中等密度的，但你可以改变的目标来影响如何您的网页缩放为不同的屏幕密度。
例如，这里是你如何用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应用程序的最佳实践
开发网页和移动设备的Web应用程序提出了不同的挑战，发展为典型的桌面浏览器的网页。为了帮助你开始，下面是一个做法，你应该遵循以Android和其他移动设备提供最有效的Web应用程序的列表。
1. 移动设备重定向到一个专门的网站的移动版本
有 几种方法可以请求重定向到您的网站的移动版本，使用服务器端重定向。大多数情况下，这是通过网页浏览器提供的用户代理字符串“嗅”。以确定是否为您网站的 移动版本，你应该简单地看为“移动”用户代理字符串，匹配的多种移动设备。如果有必要，还可以识别特定的操作系统中的用户代理字符串（如“的 Android 2.1”）。
注：大屏幕Android的供电设备，应送达全尺寸的网站（如片剂），不包括“移动”用户代理字符串，而用户代理字符串的其余部分大多是相同的。正因为如此，这一点很重要，您提供基于“移动”的用户代理字符串是否存在您的网站的移动版本。
2. 这是适用于移动设备的，使用一个有效的标记的DOCTYPE
用于移动网站是最常见的标记语言XHTML基础。这个标准，确保您的网站，最适合移动设备上的特定标记。例如，它不允许HTML框架或嵌套表，移动设备上执行不佳。随着的DOCTYPE，确保申报文件（如UTF-8）适当的字符编码。
例如：
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.1//EN”
“http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd”>
3. 使用viewport的元数据，适当地调整你的网页
在您的文件<HEAD>，你应该提供的元数据，指定您希望如何浏览器的视口，以使您的网页。例如，你的视口的元数据可以指定高度和宽度为浏览器的视口，最初的网页的规模和目标屏幕密度。
例如：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”>
如需更多有关如何使用Android的供电设备的视口的元数据的详细信息，请阅读针对Web应用程序的屏幕。
4. 避免多个文件请求
因 为移动设备通常有一个连接速度远远超过一台台式电脑慢，你应该让你的网页尽可能快的负载。加快步伐的方法之一是为了避免加载样式和脚本文件，如额外文 件<HEAD>的。相反，在<head>直接提供你的CSS和JavaScript（或在的<body>年底，脚 本，你不需要，直到页面加载）。另外，你应该通过压缩他们喜欢的工具优化您的文件的大小和速度缩小。
