网络应用最佳实践

与 如何开发适用于桌面网络浏览器的网页以下做法有助于您提供 是专为 Android 和其他移动设备设计的最有效的 Web 应用。

  1. 将移动设备用户重定向到您网站的专用移动版网站。这里有一些 来实现这一目的。一种常见的方法是“嗅”该 网络浏览器提供的用户代理字符串。确定 是否提供移动版网站，请查看“移动版”字符串。
    2. <ph type="x-smartling-placeholder">
  2. 使用 HTML5 。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，因为它会导致尺寸不正确。同样，设置 系统不支持将布局宽度设置为 wrap_content，这会导致 WebView 而是改用其父级的宽度由于存在这种行为，同样请务必确保 WebView 对象的父级布局对象的高度和宽度都设置为 wrap_content。
  6. 避免多个文件请求。因为移动设备的连接速度通常 请尽可能加快网页加载速度。加快测试的一个方法是 避免在 <head> 中加载额外的文件，例如样式表和脚本文件。 此外，请考虑 并利用 Google Analytics 4 Google 的 PageSpeed Insights，了解专门针对您的应用的详细优化建议。

其他资源