Web应用程序的最佳实践（七）

2018-08-19 本文已影响19人鹿小纯0831

与为典型的桌面Web浏览器开发网页相比，为移动设备开发网页和Web应用程序提出了一系列不同的挑战。请参阅以下相关资源：

WebView中的Pixel-Perfect UI
创建移动优先响应式Web设计
可变像素密度的高DPI图像
为了帮助您入门，以下是您应遵循的做法列表，以便为Android和其他移动设备提供最有效的Web应用程序。

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

您可以通过多种方式使用服务器端重定向将请求重定向到您网站的移动版本。通常，这是通过“嗅探”Web浏览器提供的用户代理字符串来完成的。要确定是否为您的网站的移动版本提供服务，您应该在用户代理中查找“移动”字符串。

注意：应该为全尺寸网站（例如平板电脑）提供服务的大屏幕Android设备不包括用户代理中的“移动”字符串，而其余的用户代理字符串大致相同。因此，根据用户代理中是否存在“移动”字符串，提供网站的移动版本非常重要。

2、将HTML5 DOCTYPE用于移动设备

用于移动网站的最常见标记语言是HTML5。该标准鼓励移动优先开发，以确保网站在各种设备上运行良好。与以前的Web语言不同，HTML5需要更简单的<DOCTYPE>和charset声明：

<!DOCTYPE html>
...
<meta charset="UTF-8">

3、使用视口元数据可以正确调整网页大小

在您的文档<head>中，您应该提供元数据，指定您希望浏览器的视口如何呈现您的网页。例如，您的视口元数据可以指定浏览器视口的高度和宽度，初始网页比例，甚至目标屏幕密度。

例如：

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

有关如何为Android设备使用视口元数据的更多信息，请阅读Web应用中的定位屏幕。

4、使用垂直线性布局

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

5、将布局高度和宽度设置为match_parent

将WebView对象的高度和宽度设置为match_parent可确保应用程序的视图大小正确。我们不建议将高度设置为wrap_content，因为它会导致调整错误，并且在针对Android 4.4（API级别19）及更低版本的应用中，将忽略HTML视口元标记以保持向后兼容性。同样，不支持将布局宽度设置为wrap_content，这会导致WebView使用其父级的宽度。由于这种行为，确保WebView对象的父布局对象的高度和宽度都没有设置为wrap_content也很重要。

6、避免多个文件请求

由于移动设备的连接速度通常远低于台式计算机，因此应尽可能快地加载网页。加快速度的一种方法是避免在<head>中加载额外的文件，如样式表和脚本文件。您可以通过Google的PageSpeed Insights执行移动分析，从而更好地优化移动设备上的网页加载。如果您想优化应用的效果，请参阅PageSpeed Insights Rules。

有关创建优秀移动Web应用程序的更全面指南，请参阅W3C的移动Web最佳实践。有关提高网站速度的其他指导（适用于移动设备和桌面设备），请参阅Google的“加快网络速度”中的速度教程。