`
WebAppTrend
  • 浏览: 52456 次
社区版块
存档分类
最新评论

Android官方文档之Web Apps最佳实践

 
阅读更多

为移动设备开发web页面或者web应用与为桌面浏览器开发web页面不同，会出现很多新的挑战。为了帮助你开始，下面是一系列你需要遵循的最佳实践，以便为Android和其他移动设备提供最有效的web应用。

  1. 1.  将来自移动设备的请求重定向到专门为移动端设计的Web版本

有 好几种方式可以让你使用服务端的重定向将请求重定向到你的web站点的移动版本上去。最常见的情况是通过“嗅探”（"sniffing"）web浏览器提 供的用户代理字符串（User Agent string）。为了确定是否要提供一个你的站点的移动版本，你只需要在User Agent中寻找“mobile”字符串即可，它可以与很多移动设备匹配。如果需要的话，你还可以在用户代理字符串中找到特定的操作系统（比如 Android 2.1）。

注意： 大屏幕的Android设备需 要全尺寸的网站（比如平板电脑），因此在user agent中不包含“mobile”字符串，但它的user agent的其他部分基本是一样的。由于这种情况的存在，你在发送你的站点的移动端页面的时候，一定要确认user agent中是否包含“string”字符串。

  1. 2.   使用合适于移动设备的有效的 DOCTYPE 标记

为移动站点设计的最常见的标记语言是 XHTML Basic 。这一标准确保了特定的标记可以在移动设备上有最佳表现。例如，它不支持HTML框架或是嵌套表格，因为这些在移动设备上表现都很糟。除了声明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来说是有效的。可以使用验证器（validator），比如由http://validator.w3.org 提供的一个。

  1. 3.   使用 viewport 元数据来将页面调整至合适大小

在 你的文档的<head>部分，你需要提供元数据来指定你希望如何在浏览器的viewport中呈现你的页面。例如，你的viewport的元 数据可以指定浏览器的viewport的高和宽，最初的web页面规模甚至是目标屏幕分辨率（target screen density）。

例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

想要获取更多关于如何为Android设备使用viewport元数据的信息，请阅读Targeting Screens from Web Apps 。

  1. 4.   避免多文件请求

因 为移动设备通常比台式机的联网速度慢得多，因此你需要想办法让你的页面尽快加载。一种加速加载方法是避免下载额外文件，比如<head>中的 样式表和脚本文件。相反，直接在<head>部分提供CSS或者Javascript即可（如果脚本是在页面加载完以后才用到，那么将其包含 在<body>的结束部分也可）。同样，你还可以通过类似于Minify 的工具来压缩你的文件。

  1. 5.   使用一个垂直的线性布局（ Use a vertical linear layout ）

在导航页面的时候，要避免让用户左右拖动你的页面。对于用户来说，上下拖动更容易，也让你的页面更简单。

要想知道更多关于如何创建伟大的移动web应用，请看W3C的移动设备最佳实践 。要看其他提升站点速度的建议（移动设备和桌面设备都适用），请看Yahoo！的最佳性能  指南以及Google在让web 更快 的加速教程。

 

原文链接：Best Practices for Web App

 

译文来源：http://www.webapptrend.com/
 WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展 

请大家在关注ITeye的同时，关注我们的新浪微博 @WebAppTrend，关注我们的腾讯微博@WebAppTrend，Q Q群见官方博客右侧。
分享到：
| Android官方文档之Web Apps调试
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics