I21个webApp前端开发技巧.docxVIP

　　自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备。　　我相信各位童鞋应该和我刚开始一个样子，到处查找贴子，学习如何制作WebApp项目，我们(切图网)长期从事webapp开发外包服务，累计了非常多的开发经验，希望和大家共同探讨学习WebApp。　　那么WebApp与Native App的区别是什么?　　Native App：　　缺点：　　1、开发成本非常大，一般使用的开发语言为JAVA、C++、Objective-C。　　2、更新体验较差、同时也比较麻烦，每一次发布新的版本，都需要做版本打包，且需要用户手动更新(有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示)。　　优点：　　1、非常酷　　因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果　　2、Native app是被Apple认可的　　Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。　　Web App：　　开发成本较低　　使用web开发技术就可以轻松的完成web app的开发　　升级较简单　　升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉　　维护比较轻松　　和一般的web一样，维护比较简单，它其实就是一个站点　　Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。　　在此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解，那现在就开始往下阅读吧……　　一、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用meta content=black name=apple-mobile-web-app-status-bar-style / meta content=telephone=no name=format-detection / meta name=apple-mobile-web-app-status-bar-style content=default /meta name=apple-mobile-web-app-status-bar-style content=black / meta name=apple-mobile-web-app-status-bar-style content=black-translucent /meta content=email=no name=format-detection/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 / 如果您的网站是小于980px(网页上显示的默认宽度)，然后宽度应设置这个标记。 此外，如果应用程序是iPhone的具体，然后在宽度应设置的iPhone，iPad或iPod Touch的宽度。 人们还应该牢记，而不是使用屏幕的宽度和高度的实际价值，应使用“设备宽度”和“设备的高度 ”的值。meta name=viewport content= width = device-width, initial-scale = 2.3, user-scalable = no/meta name=viewport content= width = device-width, initial-scale = 2.3, minimum-scale = 1, maximum-scale = 5 /　　下面是所有可用的选项：　　width – Width of viewport in pixels. 宽度 -视口的宽度，以像素。　　[Default: 980, Range: 200 - 10,000] [默认值：980范围：200 - 10,000]　　height – Height of viewport in pixels. 高度 -视口的高度，以像素。　　[Defau