05
2017
10

Web应用程序的最佳实践

原始文章:https://developer.android.com/guide/webapps/best-practices.html

与开发典型桌面网络浏览器的网页相比,为移动设备开发网页和Web应用程序提出了一系列不同的挑战。 为了帮助您开始使用,以下是您应遵循的实践列表,以便为Android和其他移动设备提供最有效的网络应用程序。

1.将移动设备重定向到您的网站的专用移动版本

有几种方法可以将请求重定向到您的网站的移动版本,使用服务器端重定向。大多数情况下,这通过“嗅探”Web浏览器提供的用户代理字符串来完成。要确定是否为您的站点提供移动版本,您应该只需在User Agent中查找与移动设备类似的“mobile”字符串。如果需要,还可以在用户代理字符串(比如“Android 2.1”)中标识特定的操作系统。

注意:大屏幕android驱动的设备应该提供全尺寸的web站点(如平板电脑),不包括用户代理中的“mobile”字符串,而用户代理字符串的其余部分基本上是相同的。因此,根据用户代理中是否存在“mobile”字符串,交付您的web站点的移动版本是很重要的。

2.使用适合移动设备的有效标记DOCTYPE

用于移动web站点的最常见的标记语言是XHTML Basic。这个标准可以确保你的网站在移动设备上最有效的标记。例如,它不允许在移动设备上表现不佳的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">

还要确保您的web页面标记对已声明的DOCTYPE有效。使用验证器,例如http://validator.w3.org上的验证器。

3.使用viewport元数据正确地调整你的网页大小

在您的文档中,您应该提供元数据,指定浏览器的视口如何呈现您的网页。 例如,您的viewport元数据可以指定浏览器viewport的高度和宽度,初始网页缩放以及目标屏幕密度。

例如:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

有关如何使用基于android的设备的viewport元数据的更多信息,请阅读Targeting Screens from Web Apps

4.避免多个文件请求

由于移动设备的连接速度通常远低于台式机,因此您应该尽可能快地加载您的网页。 加速它的一种方法是避免在<head>中加载额外的文件,如样式表和脚本文件。 而是直接在<head>(或<body>的末尾提供您的CSS和JavaScript,为那些直到页面加载完您才会用到的脚本)。 或者,您应该通过使用Minify等工具压缩文件来优化文件的大小和速度。

5.使用垂直线性布局

避免用户在浏览网页时向左右滚动。 上下滚动对用户来说更容易,并使您的网页更简单。

关于创建大型移动web应用程序的更详细指南,请参阅W3C的 Mobile Web Best Practices。关于提高你的网站(移动和桌面)速度的其他指导,参见Yahoo ! 的Exceptional Performance 和Google的速度教程Let’s make the web faster.

上一篇:IPA 笔记 下一篇:完美的WebView UI