21个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 viewp