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

WebAppTrend

浏览: 54646 次

最近访客更多访客>>

紫雨红唇

wfy20160315

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

WebAppTrend

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

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

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

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

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 提供的一个。

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

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

例如：

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

4. 避免多文件请求

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

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群见官方博客右侧。

分享到：

Appcelerator收购Cocoafish，旨在为Titani ... | Android官方文档之Web Apps调试

2012-02-15 00:14
浏览 683
评论(0)
分类:移动开发
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

响应式Web设计资源整理

投身移动开发必须知道的20件事

聘用NodeJS开发者的六个建议

[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎

Facebook发力Mobile Web 推出支付和测试工具

【数据】《移动优先》作者：为什么移动如此重要？

重新审视Mobile Web

WebAppTrend周刊：Google Chrome工程师推出Web App开发指南

Google Web App开发指南第四章：构建优秀的Web Apps

零基础学习Sencha Touch（资料和教程集合）

Google Web Apps开发指南之项目样例（上）

如何一步一步制作出高品质Infographic？

海豚浏览器CTO刘铁锋：Mobile Web App发展现状及展望

海豚浏览器CTO刘铁锋：Mobile Web App发展现状及展望

新手必读：PhoneGap入门六大问题

Google Web App开发指南第一章：什么是Web Apps？

Lanyrd是如何应用HTML5创建出优秀的移动Web应用的

Appcelerator收购Cocoafish，旨在为Titanium平台提供即时移动云服务

Android官方文档之Web Apps调试

Android官方文档在WebView中构建Web Apps

最近访客更多访客>>