文档介绍：自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。WebApp与NativeApp有何区别呢?NativeApp:1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。2、更新体验较差、同时也比较麻烦每一次发布新的版本,都需要做版本打包,且需要用户手动更新(有些应用程序即使不需要用户手动更新,但是也需要有一个恶心的提示)。3、非常酷因为nativeapp可以调用IOS中的UI控件以UI方法,它可以实现WebApp无法实现的一些非常酷的交互效果4、Nativeapp是被Apple认可的Nativeapp可以被Apple认可为一款可信任的独立软件,可以放在AppleStroe出售,但是Webapp却不行。WebApp:1、开发成本较低使用web开发技术就可以轻松的完成webapp的开发2、升级较简单升级不需要通知用户,在服务端更新文件即可,用户完全没有感觉3、维护比较轻松和一般的web一样,维护比较简单,它其实就是一个站点Webapp说白了就是一个针对Iphone、Android优化后的web站点,它使用的技术无非就是HTML或HTML5、CSS3、JavaScript,服务端技术JAVA、PHP、ASP。当然,因为这些高端智能手机(Iphone、Android)的内置浏览器都是基于webkit内核的,所以在开发WEBAPP时,多数都是使用HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时,若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话,这也就失去了WEBAPP的本质意义了,且有些效果也无法实现的,所以在此又回到了我们的主题–webapp的布局方式和技术。在此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定的了解,你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解,那现在就开始往下阅读吧……1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用1<metacontent=”width=device-width,initial-scale=,maximum-scale=,user-scalable=0;”name=”viewport”/>2<metacontent=”yes”name=”apple-mobile-web-app-capable”/>3<metacontent=”black”name=”apple-mobile-web-app-status-bar-style”/>4<metacontent=”telephone=no”name=”format-detection”/>第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,