本篇文章翻译自Best Practices for Web Apps
与针对典型的桌面web浏览器开发web页面相比，针对移动设备开发web页面和web应用呈现除了一种不同的挑战集合。为了帮助你入门，接下来是一个实践列表，你需要遵守它们以便为Android和其他移动设备提供最有效的web应用。
将移动设备重新定向到站点的移动版本
使用服务器端重定向，有好几种方法可以让你将请求重新定向到站点的移动版本。通常情况，通过“刺探”web浏览器提供的用户代理字符串来完成。为了确定是否要提供一个你的站点的移动版本，你需要简单地在用户代理商检查”mobile”字符串，这可以匹配多种移动设备。如果有必要，你也可以在用户代理字符串里识别制定的操作系统（如”Android 2.1”）。
大尺寸的Android设备在用户代理里并不包含”mobile”字符串，然而剩下的用户代理字符串大部分是相同的，应该为其提供全尺寸的web站点（如平板）。同样的，基于是否在用户代理中包含”mobile”字符串来提供站点的移动版本则很重要。
针对移动设备使用一个有效且合适的DOCTYPE标记
对于移动web站点来说，最常见的标记语言是XHTML Basic。这个标准确保针对web站点的标记在移动设备上可以工作地最好。例如，它不允许HTML frames或者嵌套表格，它们在移动设备上会表现地很糟糕。与DOCTYPE一起，确保为文档声明合适的字符编码（如UTF-8）。
比如：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">同样也要确保你的web页面标记对于所声明的DOCTYPE来说，是有效的。可以使用一个验证器，比如http://validator.w3.org/。
使用视图元数据适当地调整web页面的大小
在文档的<head>标签中，你应该提供元数据用于指定你想让浏览器的视图如何渲染你的web页面。比如，你的视图元数据可以指定浏览器视图的高度和宽度，web页面的初始缩放比例，甚至目标屏幕的密度。
比如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">有关如何使用针对Android设备的视图元数据，可阅读Targeting Screens from Web Apps。
避免多个文件请求
因为移动设备通常情况下网络连接速度远低于桌面电脑，所以你应该让你的web页面加载得尽可能的快。加速的一种方式是避免加载<head>标签中额外的样式表和脚本文件。作为替代，应该在<head>直接提供你的CSS和JavaScript（或者在<body>的尾部，对于脚本，直到页面加载完成时你才需要它们）。或者，你应该优化你的文件的大小和速度，通过像Minify的工具来压缩进行压缩。
使用垂直线性布局
当导航web页面时，避免用户左右滚动。上下滚动对于用户来说很容易并且也让你的web页面更简单。
要查看一个更加详细的用于创建伟大移动web应用的指南，可以参考W3C的Mobile Web Best Practices。有关提升web站点的速度（移动端和桌面）的其它指南，可以参看Yahoo!的指南Exceptional Performances和Google在Let’s make the web faster中的速度辅导。
回到主题 Web应用
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
