HTML5开发web APP 基本步骤
WebApp与Native App的区别
Native App
- 开发成本高：通常使用的开发语言为JAVA、C++、Objective - C，开发成本较大。
- 更新体验差且麻烦：每次发布新版本，都需要进行版本打包，并且一般需要用户手动更新（部分应用程序即便无需手动更新，也会有提示）。
- 交互效果酷炫：能够调用IOS中的UI控件和UI方法，实现一些WebApp无法达成的酷炫交互效果。
- 获Apple认可：Native app可被Apple认可为一款可信任的独立软件，能放在Apple Store出售，而Web app则不行。
Web App
- 开发成本较低：利用web开发技术就能轻松完成web app的开发。
- 升级简单：升级无需通知用户，在服务端更新文件即可，用户无感知。
- 维护轻松：和普通web一样，维护较为简单，本质上就是一个站点。
Webapp实际上是针对Iphone、Android优化后的web站点，运用的技术主要有HTML或HTML5、CSS3、JavaScript，服务端技术包括JAVA、PHP、ASP。由于Iphone、Android等高端智能手机的内置浏览器多基于webkit内核，所以开发WEBAPP时，大多采用HTML5和CSS3技术进行UI布局。若仍遵循一般web开发中使用HTML4和CSS2的方式，就失去了WEBAPP的本质意义，且部分效果无法实现。
在阅读本文前，你需要对webkit内核的浏览器、HTML5和CSS3有一定了解。若已了解，可继续往下阅读。
开发webapp的具体步骤和技巧
1. 使用webkit内核中的私有meta标签
这些meta标签在开发webapp时至关重要：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
- 第一个meta标签：强制文档宽度与设备宽度保持1:1，文档最大宽度比例为1.0，禁止用户点击屏幕放大浏览。
- 第二个meta标签：是iphone设备中safari的私有meta标签，允许全屏模式浏览。
- 第三个meta标签：同样是iphone的私有标签，指定iphone中safari顶端状态条的样式。
- 第四个meta标签：告知设备忽略将页面中的数字识别为电话号码。
2. 使用HTML5标签
开始编写webapp时，建议前端工程师使用HTML5而非HTML4。HTML5能实现一些HTML4无法实现的丰富WEB应用程序体验，可减少开发者工作量。在决定使用HTML5前，需熟悉其新标签的作用。例如，使用section标签定义一块内容或文章区域，使用nav标签定义导航条或选项卡。
3. 放弃CSS float属性
在项目开发中，若遇到内容排列显示的布局，建议放弃使用float，可直接使用display: block;。
4. 利用CSS3边框背景属性
对于有圆角、内发光和高光效果的按钮，单纯使用CSS3无法实现全部效果，虽然圆角可以用CSS3编写，但高光和内发光不行。此时可使用-webkit-border-image来定义按钮样式，这是一个较为复杂的样式属性。
5. 块级化a标签
为提升触控手机上的用户体验，应保证将每条数据都放在一个a标签中，尽可能扩大用户的可点击区域。
6. 采用自适应布局模式
编写CSS时，不建议前端工程师将容器（包括外层和内层）的宽度固定。为适配各种手持设备，建议使用自适应布局模式（如支付宝采用的模式），这样可使页面在ipad、itouch、ipod、iphone、android、web safari、chrome等设备上正常显示，无需考虑设备分辨率。
7. 学会使用webkit - box
自适应布局模式下，webkit为display属性提供了webkit - box值，可帮助前端工程师灵活控制盒子模型，实现移动设备上的完全自适应。
8. 去除Android平台中对邮箱地址的识别
若不想让Android自动识别页面中的邮件地址，可在head中添加如下meta标签：
<meta content="email=no" name="format-detection" />
9. 去除iOS和Android中的输入URL的控件条
若想让webapp更像nativeapp，可使用以下javascript代码去除输入URL的控件条：
setTimeout(scrollTo, 0, 0, 0);
需注意，此代码必须放在window.onload里才能正常工作，且当前文档的内容高度必须高于窗口高度。
10. 禁止用户旋转设备
在移动版的webkit中，无法禁止用户旋转设备。iOS已禁止开发者阻止orientationchange事件，虽未找到资料表明Android禁止，但实际上在Android平台也无法阻止。
11. 检测用户是否通过主屏启动webapp
iOS为safari提供了将当前页面添加到主屏的功能，点击iphone、ipod、ipod touch底部工具中的小加号，或ipad顶部左侧的小加号，可将当前页面添加到设备主屏。从主屏启动的webapp会清除浏览器上下方的工具条，更像nativeapp。此外，还可通过window对象中navigator子对象的standalone属性判断用户是否从主屏访问webapp。在iOS中，浏览器直接访问站点时，navigator.standalone为false；从主屏启动webapp时，navigator.standalone为true。而在Android中不存在添加到主屏这一功能。
12. 关闭iOS中键盘自动大写
在iOS中，虚拟键盘弹出时默认开启首字母大写功能。若需关闭，可通过为input元素指定autocapitalize="off"属性来实现。
13. iOS中彻底禁止用户在新窗口打开页面
若要禁止用户在新窗口打开页面，可使用a标签的target="_self"，或让target属性为空。但在iOS中，用户长按链接3秒钟后，仍可通过弹出的列表按钮在新窗口打开页面。此时，可通过指定当前元素的-webkit-touch-callout样式属性为none来禁止弹出这些按钮，此技巧仅适用于iOS，对Android平台无效。
14. iOS中禁止用户保存、复制图片
为img标签指定-webkit-touch-callout为none，可禁止设备弹出列表按钮，从而使用户无法保存、复制图片。
15. iOS中禁止用户选中文字
通过指定文字标签的-webkit-user-select属性为none，可禁止iOS用户选中文字。
16. iOS中获取滚动条的值
在桌面浏览器中，可通过document.scrollTop和document.scrollLeft获取滚动条的值，但在iOS中这两个属性未定义，因为iOS没有滚动条的概念。在Android中，可通过这两个属性正常获取滚动条的值。在iOS中，可通过window.scrollY和window.scrollX获取当前窗口的y轴和x轴滚动条的值。
17. 解决盒子边框溢出问题
在移动设备开发中，若指定一个块级元素并设置其宽度为100％，同时定义了边框，会发现元素的边框（左右各1像素）会溢出文档，导致出现横向滚动条。为解决此问题，可添加特殊样式-webkit-box-sizing: border-box;，使盒子大小包含边框宽度。
18. 解决Android 2.0以下平台中圆角的问题
在android 2.0以下的平台中，定义元素圆角时，需遵循以下规则：
- 必须加上
-webkit前缀（在iOS中可省略，但android中必须添加）。 - 若对边框做样式定义，如
border: 1px solid #000;，则-webkit-border-radius属性必须出现在border属性之后。 - 若左上角和右上角为圆角，需先定义全局的（4个角的圆角值）
-webkit-border-radius，再依次覆盖左下角和右下角，如-webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0;，否则在android 2.0以下的平台中将全部显示直角。
19. 解决Android平台中页面无法自适应的问题
若发现页面在android中无法自适应，首先确认head标签中是否包含以下meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
若有，再检查是否有width=device-width属性，若没有则需添加。
20. 解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式问题
iOS 4.3版本升级后，safari会对页面中的5位连续数字进行自动识别并重新渲染样式，即便添加了如下meta标签也无效：
<meta name="format-detection" content="telphone=no" />
可采用类似支付宝wap站点的做法，如将显示金额的标签改写为：
<button class="t-balance" style="background:none;padding:0;border:0;">95009.00</button>