与为桌面网络浏览器开发网页相比,为移动设备开发网页和应用程序面临着不同的挑战。以下实践可以帮助您为 Android 和其他移动设备提供最有效的 Web 应用程序。
- 将移动设备重定向到您网站的专用移动版本。 有几种方法可以使用服务器端重定向来实现此目的。一种常见的方法是“嗅探”网络浏览器提供的用户代理字符串。要确定是否要提供您网站的移动版本,请在用户代理中查找“mobile”字符串。
- 对移动设备使用 HTML5。 HTML5 是移动网站最常用的标记语言。此标准鼓励移动优先开发,以帮助确保网站可以在各种设备上运行。与以前的 Web 语言不同,HTML5 使用更简单的
<DOCTYPE>
和charset
声明<!DOCTYPE html> ... <meta charset="UTF-8">
- 使用视口元数据正确调整网页大小。 在您的文档
<head>
中,提供元数据以指定您希望浏览器视口如何呈现您的网页。例如,您的视口元数据可以指定浏览器视口的高度和宽度、初始页面缩放比例以及目标屏幕密度。以下示例显示了如何设置视口元数据
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
有关如何对 Android 设备使用视口元数据的更多信息,请阅读 在 Web 应用中支持不同的屏幕。
- 使用垂直线性布局。避免用户在浏览页面时需要左右滚动。上下滚动对用户来说更容易,并且使您的页面更简单。
- 将布局高度和宽度设置为
match_parent
。 将您的WebView
对象的高度和宽度设置为match_parent
可确保您的应用视图大小正确。我们不建议将高度设置为wrap_content
,因为它会导致大小不正确。同样,将布局宽度设置为wrap_content
不受支持,并导致您的WebView
使用其父级的宽度。由于这种行为,还必须确保您的WebView
对象的任何父布局对象的高度和宽度都没有设置为wrap_content
。 - 避免多个文件请求。由于移动设备的连接速度通常比台式计算机慢,因此请尽可能快地加载页面。加快速度的一种方法是避免在
<head>
中加载额外的文件,例如样式表和脚本文件。此外,请考虑 使用 Google 的 PageSpeed Insights 执行移动分析,以获取特定于您的应用的详细优化建议。