与桌面 Web 开发相比，为移动设备开发网页和 Web 应用有更多挑战。请参阅以下相关资源：
1. 将移动设备重定向到网站的移动版 — Redirect mobile devices to a dedicated mobile version of your website
你可以通过多种方式使用服务器端重定向将请求重定向到你网站的移动版本。通常，这是通过检索 Web 浏览器提供的用户代理字符串来完成的。要确定是否为你的网站提供移动版本，你应该在用户代理中查找 “mobile” 字符串。
注意：大屏幕 Android 设备的用户代理中不包括 “mobile” 字符串。因此，根据用户代理中是否存在 “mobile” 字符串，提供网站的移动版本非常重要。
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 设备使用视窗元数据的更多信息，请阅读支持网络应用中的不同屏幕。
4. 使用垂直线性布局
在浏览网页时，用户无需向左和向右滚动。向上和向下滚动对用户来说更容易，并使你的网页更简单。
5. 将布局高度和宽度设置为 match_parent
将 WebView 对象的高度和宽度设置为 match_parent 可确保应用程序的视图大小正确。我们不建议将高度设置为 wrap_content，因为它会导致不正确的大小调整，并且在针对 Android 4.4（API 级别 19）及更低版本的应用中，将忽略 HTML 视窗元标记以保持向后兼容性。同样，不支持将布局宽度设置为 wrap_content，这会导致 WebView 使用其父级的宽度。由于这种行为，确保 WebView 对象的父布局对象的高度和宽度都设置为 match_parent 也很重要。
6. 避免同时请求多个文件
由于移动设备的连接速度通常远低于台式计算机，因此你应该尽可能快地加载网页。加快速度的一种方法是避免在 <head> 标签中加载额外的文件，如 stylesheet 和 script 文件。你可以使用 Google 的 PageSpeed Insights 执行移动分析，从而更好地优化移动设备上的网页加载。如果你想优化应用的性能，请参阅 PageSpeed Insights Rules。
有关创建优秀移动 Web 应用程序的更全面指南，请参阅 W3C 的移动 Web 最佳实践。有关提高网站速度的其他指导（适用于移动设备和桌面设备），请参阅 Google 的速度教程 Make the Web Faster。
网友评论