Web应用程序的最佳实践

曾经终败给现在 2022-06-07 01:25 290阅读 0赞

原始文章：[https://developer.android.com/guide/webapps/best-practices.html][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][http_validator.w3.org]上的验证器。

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

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

例如：

有关如何使用基于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][Let_s make the web faster].

[https_developer.android.com_guide_webapps_best-practices.html]: https://developer.android.com/guide/webapps/best-practices.html
[http_validator.w3.org]: http://validator.w3.org
[Targeting Screens from Web Apps]: https://developer.android.com/guide/webapps/targeting.html
[Mobile Web Best Practices]: https://www.w3.org/TR/mobile-bp/
[Exceptional Performance]: https://developer.yahoo.com/performance/#rules
[Let_s make the web faster]: https://developers.google.com/speed/articles/?csw=1