Web 应用程序概述
有两种基本的方式提供Android 应用程序：客户端应用程序（使用Android SDK 的开发，并在用户设备的安装 APK 文件 ）或Web 应用程序（使用Web 标准开发，并通过Web 浏览器访问——此时没有什么需要安装在用户设备）。
您为您的应用选择方法取决于几个因素，但Android 通过提供下列支持，使您更容易决定开发一个Web 应用程序：
∙ 对视窗（viewport ）特性的支
持，让您能够正确的基于屏幕尺寸调整Web 应用程序 ∙ CSS 和JavaScript 特性，让您
能够基于屏幕的像素密度（屏幕分辨率）提供不同的风格和图像  因此，您决定开发一个Android 的Web 应用程序时，可以不考虑
屏幕适配问题，因为Android 已经很容易的使您的Web 页面能够很好地适应所有类型的屏幕。
Android 的另一大特点是，您不需要建立纯客户端或纯Web 应用程序。您可以在Android 应用程序的布局中使用WebView ，将一些Web 页面嵌入到Android 客户端应用程序中，使客户端应用与Web 应用混合在一起。 图1展示您怎样提供Web 页面，可以让Web 浏览器或Android 应用均可访问的方法。但是，您不应该开发一个Android 应用程序只是用来启动您的网站。 相反，应该特别设计嵌入在您的Android 应用程序中的Web 页面，使它适应环境。 您甚至可以允许在Android 应用程序与JavaScript 的Web 页面之间定义接口，调用Android 应用程序API ——提供API 给Web 应用。
从Android 1.0开始， WebView  已经能够将Web 内容嵌入到Android 应用程序的布局中，并且将JavaSc
ript 绑定到Android API 中。如上所述，在Android 支持更多屏幕分辨率（支持高、低分辨率）后，
Android 2.0增加WebKit 框架，允许Web 页面指定视窗属性和查询屏幕分辨率，以便更改的风格和图像资源。由于这些功能是Android WebKit 框架的一部分，Android 浏览器（平台提供的默认Web 浏览器）和 WebView  都支持相同的视窗和屏幕分辨率功能。
要开发Android 设备的Web 应用程序，您应该阅读下列文件：
图1您可以使用两种方式，将您的网页内容提供给用户：使用传统的Web 浏览器；使用包含WebView 布局的Android 应用程序。
从Web 应用程序定位屏幕
说明如何正确地在您的Android 设备上调整Web 应用程序尺寸，并支持多种屏幕分辨率。 如果你正在构建一个Web 应用程序，并期望它能够在Android 设备上运行（您假设在网络上发布任何内容），该份资料是非常重要的，特别是如果您是针对移动设备或使用 WebView  。
在WebView 中构建Web 应用程序
说明如何使用 WebView 在您的Android 应用程序中嵌入网页，并绑定JavaScript 到Android API 。
调试Web 应用程序
说明如何使用JavaScript 控制台的API 调试Web 应用程序。
Web 应用的最佳实践
给出您在Android 设备提供有效的Web 应用程序时，应该遵循的实践。
从Web 应用程序定位屏幕
如果您正在移动设备开发Android 的Web 应用或重新设计程序，您应该仔细考虑如何使您的Web 页面呈现在各种不同的屏幕上。 由于Android 是适用于不同类型屏幕的设备，您应该考虑影响Web 页在Android 设备显示的因素。
注：
本文档描述的是在Android 2.0和之后更改版本中，Android 平台浏览器和WebView  （显示Web 页面的框架视窗Widget ）提供支持的特性。运行在Android 上的第三方Web 浏览器可能不支持这些特性，以控制视窗尺寸和屏幕分辨率。
当Web 页面是为Android 设备，有两个基本因素，应该考虑：
视窗大小和Web 页面比例
当Android 浏览器加载Web 页面时，默认行为是在“概览模式”下装载，它缩小Web 页面视窗。 您可以通过定义Web 页面的视图默认尺寸或初始比例来忽略这默认行为。 如果需要，您还可以控制用户，他能够缩放多少Web 页面尺寸。 用户可以在浏览器设置中禁用概览模式，所以您永远不应该假设Web 页面是以概览模式加载。相反，您应该为Web 页面适当地自定义视窗尺寸和/或比例。
然而，当页面是在 WebView 中呈现，页面以完全缩放（full zoom ）方式载入（不是以“概览模式”）。 也就是说，页面以默认大小呈现，而不是缩小（如果用户禁用概览模式，也是这样呈现页面）。
快速查看
∙ 您可以针对不同屏幕的Web 页面
使用视窗元数据，CSS 和JavaScript 。
∙ 这份技术文档是针对Android 2.0
之后的版本，和在默认Android 浏览器中用WebView 渲染Web 页面。
设备的屏幕密度
在Android设备上，屏幕密度（每英寸像素数）影响Web页面显示的分辨率和尺寸。（有三类屏幕密度：低、中、高。）Android浏览器和 WebView 通过缩放Web页面来补偿各种屏幕密度的变化，以便在所有设备上以相当于中等屏幕密度大小显示可看到的Web 页面。如果图形是Web页面设计的重要元素，你要密切关注在不同密度缩放发生情况，因为图像缩放可能生产变形（模糊和颗粒化）。
为了在所有屏幕密度上提供最好的表示效果，您应该通过提供有关Web页面的目标屏幕密度的视窗元数据和提供可供不同屏幕密度选择的图形，来控制缩放后发生的变化，您可以用CSS或JavaScript来适应于不同的屏幕。
本文的其余部分将介绍如何可以考虑到这些影响，并提供了多种类型的屏幕上好的设计。使用视窗元数据
视窗是Web页面的绘制区域。虽然视窗的可见区域与屏幕大小相匹配，但是视窗有其自身的尺寸，以决定Web页面的有效像素。也就是说，Web页面像素数超出屏幕面积是由视窗的尺寸定义的，而不是由设
备屏幕尺寸定义的。例如，虽然设备屏幕宽度是480像素，而视窗宽度可以有800像素，这样Web页面设计为800像素宽度，在屏幕上也是完全可见的。
您可以在HTML <meta>标签（必须放置文档的<head>处）中使用“viewport”特性，为您的Web页面定义视窗特性。在<meta>标签的content属性中，您可以定义多个视窗特性。例如，您能定义视窗的高和宽，页面的初始比例，以及目标屏幕的密度。在content属性中的每个视窗特性必须有逗号隔开。
例如，HTML 代码指定视窗的宽度完全与设备屏幕宽度相同，并且禁止缩放能力：
<head>
一般使用的分辨率的显示密度是多少dpi<title>Exmaple</title>
<meta name=”viewport”content=”width=device-width,user-scalable=no”/>
</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],
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
“/>
以下章节讨论如何使用这些视窗特性，以及它们可使用的值是什么。
图1在Android浏览器中，没有视窗元数据集（默认“概览模式”启用，视窗的宽为800像素），Web页面中宽度为320像素的图像。
图2 视窗width= 400 并且启用“概览模式”（图像宽度是320像素）。
定义视窗的大小
视窗的height 和width 特性运行您指定视窗的尺寸（在Web页面移出屏幕的可用像素）。正如上面介绍，默认情况下，Android浏览器是以“概览模式”加载页面（除非用户禁用它），
视窗的最小宽度设置为800像素。因此，如图1所示，如果您的Web页面宽度是320像素，那么您的Web页面显示小于屏幕可视范围（即使物理屏幕宽度是320像素，因为视窗的可绘制区域宽度是800像素）。为了避免这种效果，您应该明确定义视窗width与您设计的Web 页面宽度相匹配。
例如，如果您要设计的网页宽度精确为320像素，那么你可能指定视窗宽度：
<meta name=”viewport”content=”width=320” />
在这种情况下，您的Web页面正好填满屏幕宽度，因为Web页面的宽度和视窗的宽度相同。
注：
Width值大于10,000将被忽略，小于等于320将等同月device-width（下面讨论）。Height 值大于10,000和小于200都将被忽略。
为了图示这个特性是如何影响您的Web页面视窗，图2展示视窗宽度为400，包括320像素宽度图形的Web页面。
注：
如果您设置视窗宽度与您的Web页面宽度相匹配，而与设备屏幕宽度不匹配，那么Web 页面也可以填满屏幕，即使设备有高或低密度屏幕，因为默认时Android浏览器和WebView会调整Web页面以适应中等密度屏幕（如您在图2中看到，hDPI设备与mDPI 设备的比较）。屏幕密度的更多的讨论将在“定义视窗目标密度”中。
自动调整大小
当选择以精确的像素指定视窗的尺寸时，您可以通过分别定义视窗height和width特性为device-height和device-width值，来设置视窗大小总是与设备屏幕尺寸相匹配。当您开发的Web应用有流体宽度（非固定宽度）这些设置是恰当的，但是您要它看似固定（就相似Web 页面宽度适配每个屏幕完美的适配每种屏幕）。例如：
<meta name=”viewport”content=”width=device-width” />
如图3所示，无论当前屏幕宽度是什么，就这个结果都匹配视窗宽度。重要的是要注意，当前设备密度
不匹配target density，这将导致图像按比例调整以填满屏幕，如果您没有另行指定，这是中密度。因此，在图3中，中等密度屏幕宽度的图像在高密度设备上显示时，被按比例放大以匹配屏幕宽度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。