Web 应用最佳实践

与为桌面 Web 浏览器开发网页相比,为移动设备开发网页和应用面临不同的挑战。以下做法可以帮助您为 Android 和其他移动设备提供最有效的 Web 应用。

  1. 将移动设备重定向到您网站的专属移动版本。 可以使用服务器端重定向通过多种方式实现此操作。一种常见方法是“嗅探”Web 浏览器提供的 User Agent 字符串。要确定是否提供您网站的移动版本,请查找 User Agent 中的“mobile”字符串。
  2. 为移动设备使用 HTML5HTML5 是移动网站中最常用的标记语言。该标准鼓励移动优先开发,以帮助确保网站可在各种设备上运行。与以前的 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_parentWebView 对象的高度和宽度设置为 match_parent 可确保应用视图的尺寸正确。我们不建议将高度设置为 wrap_content,因为这会导致尺寸不正确。类似地,不支持将布局宽度设置为 wrap_content,这会导致您的 WebView 改为使用其父级宽度。鉴于此行为,务必确保您的 WebView 对象的任何父级布局对象都没有将其高度和宽度设置为 wrap_content
  6. 避免多个文件请求。由于移动设备通常连接速度比台式计算机慢,请尽量加快网页加载速度。一种加快速度的方法是避免在 <head> 中加载额外的文件(例如样式表和脚本文件)。此外,考虑使用 Google 的 PageSpeed Insights 执行移动分析,以获取针对您应用的详细优化建议。

其他资源