网络应用最佳实践

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

  1. 将移动设备重定向到网站的专用移动版本。您可以通过多种方式使用服务器端重定向来实现此目的。一种常用的方法是“嗅探”网络浏览器提供的用户代理字符串。若要确定是否提供移动版网站,请在用户代理中查找“mobile”字符串。
  2. 针对移动设备使用 HTML5HTML5 是移动网站最常用的标记语言。 此标准鼓励优先进行移动设备开发,以确保网站可在各种设备上运行。与以前的网页语言不同,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 进行移动设备分析,以获取专门针对您的应用的详细优化建议。

其他资源