“User Agent Switcher” 是一个firefox add-on。可以模拟iphone，IE客户端浏览网页。
先将User Agent切换为iphone3.0，然后打开gmail和其他的google站点，qq空间站点，我可以看到iphone的界面和网页代码。
可以看出来这个页面基本上没有html，都是靠javascript生成。
原文：http://sixrevisions.com/web-development/html5-iphone-app/
你在这一年中很受挫，我知道的。所有的object-c的开发者都有一段在iPhone上写程序的痛苦经历。你曾经想找一两篇iPhone开发的初级教程，但是它的C语言太难学了。
我不想说一些让你放弃的消极的话：你可以放弃它，这意味着这些时间你可以做些别的。
你可以作一个native app 和别的app 一样，并且，很大程度上，它看起来就是一个完美的仿冒的应用程序。
只要你会 HTML(5)，CSS 和 Javascript 就能做到。
我将向你演示 如何 制作一个 离线的iPhone应用程序，说白点就是我会一步一步教你怎么作一个俄罗斯方块游戏(Tetris game)。
什么是离线？离线意味着，我们有一个自定义的icon和界面让他们看起来像本地应用程序，无论手机是否链接了网络都能是使用。
这个app就像手机中的普通应用程序一样当它离线时也会可以运行。
这虽然是一个详细的iPhone教程，但更多的技术来自于所有手机都内嵌的支持HTML5浏览器。
看下面的图片，它没有URL 的输入框 也没有浏览器导航在底部，看起来就是一个本地的手机应用程序。
利用HTML5的offline caching，你访问服务器文件可以改变文件的HTTP Headers。
Apache对这个支持的非常好，你只要修改.htaccess 文件就行了。这有一个教程 《使用htaccess修改HTTp headers》
还有一件事你需要做，你的iPhone unit中的 Safari的网页浏览器中需要打开debug bar，进入设置：.app > Safari > Developer on your iPhone，然后打开debug console。这可以方便你查看潜在的JavaScript 错误。
一旦你创建了你的app，你就应该将这个关闭以便于在测试你的HTML5 iPhone app时得到完整的体验。
icon需要是57px x 57px。
iPhone会将所有的icon图片做圆角处理，创建阴影效果。
其次图片必须是PNG或者JPG格式。
这个是我在俄罗斯方块游戏中使用的图片。
起始屏幕需要320px x 460px 也必须是PNG或JPG格式。
这个是我用的起始屏幕图片。
保持小（small），少（sparse）和简单（simple）.
这是一个新标准，点这里查看更多。
应用程序缓存允许浏览器检测网页是否需要网络才能工作。
它可以缓存你想缓存的文件，语法非常简单：只要把每个文件（例如：http://yourwebserver.com/picture.png）的绝对目录列在manifest文件（/picture.png）。浏览器会让这些文件离线。
你也可以列出需要缓存文件的URL。但是这个对于离线应用没有效果的（有兴趣的朋友看这里）
通过manifest（需要缓存的文件列表）来缓存文件有一个棘手的问题，需要将filetype Header设置为 text/manifest。这也是为什么需要设置HTTP headers来访问web服务器。
设计程序的一个提醒：当你在应用程序模式（app mode）时，屏幕大小为 320px x 460px。当你在网页模式（web mode）时，屏幕会变成320px x356px。这会影响你的HTML5程序的用户界面。
这里你可以看到不同他们的不同。
iPhone浏览器是一个真正的支持HTML5的浏览器，所以HTML代码完全相同。
更多的详细，请查看Safari Developer‘s corner：
程序开始定义markup，下面是俄罗斯方块app的markup。
<!DOCTYPE html>
<html manifest="tetris.manifest">
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="iphon_tetris_icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png" />
<link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8">
<title>offline Tetris</title>
</head>
<body>
<!-- Put your Markup Here -->
<script type="text/javascript" src="tetris.js"></script>
</body>
</html>
首先，注意Doctype，这难道不值得为HTML5欢呼吗？
其中<html>标签中的manifest=”cache.manifest” 属性 告诉浏览器，我们需要缓存这个离线页面。
这些是苹果 在HTML5中独有的markup，简单的介绍下：
apple-mobile-web-app-capable: 另一种声明这是一个offline app。apple-mobile-web-app-status-bar-style: 当程序离线时隐藏status bar和 nav bar。apple-touch-icon:指向需要成为icon的图片。apple-touch-startup-image:指向起始图片的url。同时要注意，把CSS放在顶上而把JavaScript放在底部（最好这样做）。
与大多数网页一样，你还可以使用 -webkit 规则的CSS做一些像动画一样非常酷的特效。但是这个话题有点超出本文的范围了。
下面的CSS很朴素
body {
overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
}
这个样式只是为了确保div元素能适应iPhone的显示界面。
我用了一个改装过的javascript版本，来自于Dalton Ridenhour;我在Github上发现的.JS本来是用在网页浏览器中的。而我不得不做了一点点修改让它支持键盘。
一般来说，JS 方法在iPhone中运行正常-虽然有些小问题。想想一些类似mouseover在iPhone中存在的事件，我不确定当你没有标准的点击设备时（如：鼠标）能帮到多少。Quirksmode发表了一篇关于events on the iPhone的文章，受益良多。
当你全完成了，你可以在iPhone中打开index.html 测试，应该能够可以见所有运行正常。
接着，下一步是从一个真实的服务器上设置缓存 manifest。
然后你可以添加到主桌面上，然后查看离线模式。
你可以参考一个可以运行的版本，我创建在：
随着需要离线的文件越来越复杂，你也可以讲用户数据存储在一个离线数据库中。有两个主要的API，一个是保存每个用户的数据，另一个是用来保存每个页面的数据。
第一种是localStorage。localStorage，一种简单的键值对存储方式。
localStorage.dataToStore = 5; console.log(localStorage.dataToStore); // 5
举个例子，你可以用它来存储用户的得分。
第二种实际上时一个离线的SQL引擎，一个webdatabase。API更先进一些，这有一点代码：
/ Try and get a database object
var db;
try {
if (window.openDatabase) {
db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
if (!db)
alert("Failed to open the database on disk. This is probably because the version was /
bad or there is not enough space left in this domain's quota");
} else
alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled");
} catch(err) { }
// Check and see if you need to initalize the DB
db.transaction(function(tx) {
tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
loadNotes();
}, function(tx, error) {
tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp /
REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {
loadNotes();
});
});
});
// Insert a test Note.
var note = {
id: "1",
text:" This is a test note",
timestamp: "112123000",
left:10,
top:10,
zIndex:2
};
db.transaction(function (tx)
{
tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES /
(?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);
});
// Get all the notes out of the database.
db.transaction(function(tx) {
tx.executeSql("SELECT id, note, timestamp, left, top, zindex /
FROM WebKitStickyNotes", [], function(tx, result) {
for (var i = 0; i < result.rows.length; ++i) {
var row = result.rows.item(i);
var note = new Note();
note.id = row['id'];
note.text = row['note'];
note.timestamp = row['timestamp'];
note.left = row['left'];
note.top = row['top'];
note.zIndex = row['zindex'];
if (row['id'] > highestId)
highestId = row['id'];
if (row['zindex'] > highestZ)
highestZ = row['zindex'];
}
if (!result.rows.length)
newNote();
}, function(tx, error) {
alert('Failed to retrieve notes from database - ' + error.message);
return;
});
});
离线HTML程序可以做很多东西，游戏，像俄罗斯方块，没有什么是不可能的，但是你需要事先考虑你想做什么是否有必要做成离线程序。雷神之锤3竞技场，可能不行，做一个确信可行的 to-do程序表。
让应用程序遍地开花吧！
如果你想作一些基于浏览器程序的离线应用的话，告诉你一个好消息，HTML5越来越近了。在HTML5之前，你只有两个选择：
1.要求你的用户安装 Google Gears
2.作一个本地服务器栈
现在有了HTML5，除了cookies，有三种产生离线应用的方法：
1.应用程序缓存原理（声明manifest属性）
2.本地对象存储（local object storage）
3.本地SQL数据库（local SQL databases）
目前SQL只能在Safari，Google Chrome，IPhone和Palm的WebOS（包括应用程序与浏览器）运行。FireFox 3.51说是已经开始支持SQL，但是现在仍然不能用有bug。
现在没有一个十分清晰的的 HTML5中使用的SQL语法，SQLite的语法是目前的替代方案。那意味着如果你有SQL代码方面的问题，可以直接代SQLite的网站找解决方法。
一个简单测试你的环境是否支持HTML5的数据库的方法：
if (window.openDatabase)
db = window.openDatabase("app", "", "my app db name", 1024*1024);
现在，可以简单测试下db在这个操作之后是不是一个对象.如果你得到了一个数据库对象，说明你的浏览器支持创建与访问你的程序的数据库。让我们来看看他是如何工作的：
window.openDatabase( DatabaseName, DatabaseVersion, DisplayName, EstimatedSize )
这里要小心填写数据库的版本参数，如果你设置的和本地的版本不符合，操作将会失败。这个参数的原理是 有机会扩展和升级数据库，但也可能带来一大堆其他的麻烦。
通过数据库事务（transaction）进行异步访问(asynchronous access)的接口:
transaction.executeSQL( SQLStatement, SQLParameters, ResultsetCallback, ErrorCallback )
以及我们如何使用：
db.transaction(function(tx)
{
tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?',
[ selectedCategory ],
function (tx, rs) { displayMyResult(rs); },
function (tx, err) { displayMyError(err); } );
});
这个迷人的例子展示了如何从DB中取得数据，或者说是如何执行SQL语句，再这个例子中 displayMyResult(rs) 与 displayMyError(err) 只是个占位符，代表你对错误信息做的任何事情。
这就是它的基本知识，现在你就可以写自己的离线应用了！
现在的 HTML5 就像当年崭露头角时的 Ajax，有人在做，但不知道叫它什么。最近，苹果在 HTML5 上大做文章，而著名的 Web 设计师 Eric Meyer 则提出了 Web Stacks 的概念。Alex Kessinger 是 Yahoo 的一名前端工程师，本文是他对 HTML5 应用现状与前景的思考。
开源模式带来转变
O’Reilly 创始人，Tim O’Reilly，一位开源的支持者，曾在《Open Source Paradigm Shift》中如是说：
“IBM 对个人电脑设计的商品化使利润从硬件转移到软件这一层面，而开源将带来新的财富“
价值在不同的层面转移，HTML5 将成为新的层面，商品的价值在下降，现时的浏览器已经成为商品，但这并没有问题，只要它们都遵守标准。人们说，我们可以将操作系统置入浏览器中，但这行不 通，如果我们可以从过去的经历中学到些什么，那就是，不能简单照抄过去的模式，好比广播到电视的变迁，你不能简单地在一个播音员面前放台摄像机完事，将操 作系统置入浏览器未必比 HTML5 离线应用本身更有价值。
发布渠道的重要
诸如 苹果应用商店，Android 应用商店一类的渠道将成为主导，另外，一些新的，象 Valve 游戏渠道，Netflix 电影渠道一类的东西将会出现，在”云“时代，这些发布渠道将像桌面时代的操作系统一样用来对用户进行组织和归类。
我们是如何到达现在这个阶段的?
有两个关键的因素。
感谢 Web 标准
尽管浏览器市场并不统一，但至少他们都运行 HTML，JavaScript 和 CSS。当我们希望通过 Web 推出一些东西的时候，我们知道，无论如何，用户都能看到，然而你能想象人们都自己定义 Web 时的情景吗，假如有人不使用 HTTP协议，或者不使用 HTML，那才是世界的末日。W3C 一类的组织让各个浏览器厂家都保持同一个方向。
还好，我们并没有很多渲染引擎
浏览器并不好做，数十亿的网页，参差不齐的代码，这些东西让独立开发者没有机会单独设计浏览器，因此，有能力设计浏览器的始终是那么一小撮厂商，事实上， 时至今日，我们只有四种主要的浏览器渲染引擎，Trident (IE), Gecko (Mozilla, Firefox), WebKit (Chrome, Safari), 以及 Presto (Opera)，而众多浏览器都是建立在这些渲染引擎之上的。这意味着，不管在什么样的设备上，我们不用太担心它使用什么样的浏览器，不管什么设备，只要 它有一个浏览器，就有一个可以运行 HTML5 的环境。
标准何日面世？
关于 HTML5 成为标准的时间，Ian Hixie 的说法最受认可:
“根据估计，HTML5 直到 2022 年才会形成 W3C 推荐标准“
然而，虽然标准的形成尚待时日，但浏览器厂商已经在实现各种 HTML5 功能。
功能探测 vs 浏览器探测
如果你是开发者，你可以使用那些高级功能，但需要进行功能探测并提供渐进式设计。坊间有大量的功能探测库，如 Modernizer ，另外，Mark Pilgrim 有一个清单，它可以让你探测任何功能。
离线 API
离线 API 是一切 HTML5 应用的基础，不单单是离线数据的事，对开发者来说，拥有本地存储（localStorage） 自然很好，但如何让程序完全离线运行？Application Cache 是答案。如果不能离线保存源文件和数据，我们就无法实现离线的 HTML5 应用。
我们目前有几种离线存储机制，简单的如 localStorage 和 SQL 存储引擎，已经有一些浏览器在支持了，而最新的明星是 Indexed Database，它得到了所有主流浏览器 支持。这些离线保存应用和数据的能力，是 HTML5 的基础，目前，Webkit，Firefox 已经可以实现，而 IE9 也即将实现。即时 IE9 的支持还需要等待，想一下，最需要离线应用的场合是哪里，自然是智能手机和上网本，智能手机多数都是用 Webkit。
W3C Web 应用工作组：HTML5 应用的下一步
W3C WebApps 标准已经做了大量工作，包括 API 及 HTML5 Web 程序细则。
HTML5 应用的打包部署
HTML5 apps – QuirksBlog 博客文章中说，”对于本地/离线 HTML5 应用，W3C Widget packaging and configuration 是首选机制，并将成为事实标准，很多厂商已经开始对之进行实现。W3C Widgets 支持任意平台的 Vodafone S60 和 Samsung 手机, Opera 桌面与移动浏览器，Bolt 浏览器 以及 Windows Mobile 6.5。BlackBerry 也支持，不过需要特殊的 Java 包。“
这些都是标准，本质上讲，如果你有一个 HTML5 应用，它就会包含 HTML, CSS, 以及 JS，这些标准只不过偶是帮助开发者将他们的程序打包发行，如果你熟悉 PEAR, 它们是很相似的概念。你可能需要一些元数据，告诉系统你的程序是如何打包在一起的，在支持这些标准的平台上，你就可以保证你的用户可以顺利运行这些程序。
其它
HTML5 还有更多 API 可以帮助开发者创建应用，这些 API 可以让你的程序访问诸如本地文件，摄像头，SOCKET 通信服务，以及硬件动画加速等。这些 API 仅仅是开端，这样的 API 后期会越来越多。
HTML5 程序可以应用在哪里？
当然是浏览器，如果一个设备拥有一个浏览器或渲染引擎，而且这个引擎是现代引擎，它就可以运行 HTML5 程序。HTML5 程序会应用在以下几种场合。
桌面
如果你拥有一个符合 Web 标准的浏览器，就可以运行 HTML5 应用。桌面仍然很重要。
指定站点浏览器
诸如 Gmail 一类的站点可以看做一个应用，使用专门的浏览器运行，这 样的浏览器没有地址栏，是专门用来运行指定站点应用的，甚至可以制作一个安装包来分发。以下资源值得一看，Prism, Fluid/Fluidium 以及 NativeHost。
移动领域
这是 HTML5 最热门的运行场所。iPhone 可以和很多程序集成，将你的程序显示在它的今日桌面（这里有一个教程），Android 也支持需要的 HTML5 API，但集成不够好。未来几年，支持 HTML5 的移动浏览器将如雨后春笋，将你的应用向 HTML5 迁移是很明智的，因为 HTML5 将很好地运行在这些设备上。
跨界领域
已经有公司即将发布电视平台，Google TV 以及 Apple TV，Google 表示，他们的 TV 平台将支持 HTML5，我们不知道苹果的 TV 平台将支持什么，鉴于他们最近对 HTML5 的一系列炒作，很有可能也支持。另外一些电视盒厂商，如 Boxee 业已开始支持 HTML5，如果你想为 Boxee 开发应用，与其专门为它开发，不如直接使用 HTML5。
跨界领域拥有大量的平台，那些可以连接电脑的电视的数量在不断增长，我们已经可以在电视上全屏观看 YouTube，而备受欢迎的 Wii 则内置了 Opera。所有这些，都将借助 HTML，CSS 与 JavaScript。
HTML5 应用商店
Eric Meyer 讲到了 HTML5 应用程序问题，他将 HTML5 应用成为 Web Stack Apps， HTML5 要获得更多关注，可以建立 HTML5 应用商店。Chrome 正在这样做，而 Palm 已经有了一个这样的东西。
应用商店是很好的东西，开发者可以直接得到报酬，而无需像现在这样靠广告维持，同时，用户也将有一个地方去为他们的设备寻找程序。
HTML5 市场前景
HTML5 在快速成长，值得所有人密切关注，最近的一两年，会有很多公司进入这个领域，我们或许会在 Chrome 应用商店看到一些重量级厂商，我们也有希望在 Google TV 和 Apple TV 领域看到一些应用商店的出现。HTML5 会像传统的 Flash，Flex，Silverlight，Objective-C 那样，形成自己的生态系统。HTML5 将比 Flash, Flex, Silverlight 以及 Objective-C 更容易出现在任何设备。
对于年轻一代开发者，HTML5 应当是他们首选技能，HTML5 会形成很大的市场，很有很多公司需要这方面的人才。