Web 应用最佳做法

与针对典型的桌面版网络浏览器开发网页相比，针对移动设备开发网页和 Web 应用需要应对一系列不同的挑战。请参阅以下相关资源：

为了帮助您轻松上手，下面列出了您应遵循的做法，这些做法可助您面向 Android 设备和其他移动设备提供最富有成效的 Web 应用。

  1. 将移动设备用户重定向至专用的移动版网站

    您可以通过多种方式使用服务器端重定向将请求重定向至您的移动版网站。通常情况下，这通过“嗅探”网络浏览器提供的用户代理字符串实现。要确定是否提供移动版网站，您应查看用户代理中是否存在“mobile”字符串。

    2. 注意：屏幕较大、应呈现完整尺寸网站的 Android 设备（例如平板电脑）不会在用户代理中包含“mobile”字符串，而用户代理字符串的其余部分大致相同。因此，请务必根据用户代理中是否存在“mobile”字符串来提供移动版网站。

  2. 针对移动设备使用 HTML5 DOCTYPE

    HTML5 是最常见的用于移动网站的标记语言。此标准鼓励专门针对移动设备进行开发，以确保网站能够在各种设备上顺畅运行。与以前的网页语言不同，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 规则。

如需关于如何创建出色的移动 Web 应用的更全面的指南，请参阅 W3C 的移动网络最佳做法。如需关于如何提高网站速度（针对移动设备和桌面设备）的其他指南，请参阅 Google 的使浏览网页更快捷中有关速度的教程。