21个webApp前端开发技巧

自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 name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

如果您的网站是小于980px(网页上显示的默认宽度)，然后宽度应设置这个标记。此外，如果应用程序是iPhone的具体，然后在宽度应设置的iPhone，iPad或iPod Touch的宽度。人们还应该牢记，而不是使用屏幕的宽度和高度的实际价值，应使用“设备宽度”和“设备的高度”的值。

下面是所有可用的选项：

width – Width of viewport in pixels. 宽度 -视口的宽度，以像素。

[Default: 980, Range: 200 - 10,000] [默认值：980范围：200 - 10,000]

height – Height of viewport in pixels. 高度 -视口的高度，以像素。

[Default: calculated with the width and aspect ratio of the device, Range: 223 - 10,000] [默认：计算的宽度和长宽比的设备，范围：223 - 10000]

initial-scale – The initial scale of the viewport.

最初的规模 -视口的初始规模。

[Default: calculated to fit the webpage in the area available, Range: calculated with minimum-scale and maximum-scale properties.]

[默认：计算面积，范围，以适应网页：最小规模和最大规模的的物业计算]

minimum-scale – The minimum scale of viewport. 最小规模 -视口的最低规模。[Default: 0.25, Range: >0 - 10] [默认：0.25，范围：0 - 10]

maximum-scale – The maximum scale of viewport. 最大规模的-视口的最大规模。[Default: 1.6, Range: >0 - 10] [默认值：1.6，范围：0 - 10]

user-scalable – Whether the user can zoom in and

out. 用户可扩展性 -无论用户可以放大和缩小。 [Default: yes, Options:

yes or no] [默认：是的，选项：yes或no]

手机浏览缩放控制

其中：

iPhone满屏幕显示：width=device-width width – viewport的宽度 [默认值：980范围：200 - 10,000]

height – viewport的高度 [默认：计算的宽度和长宽比的设备，范围：223 - 10000]

initial-scale –初始的缩放比例 [默认：计算面积，范围，以适应网页：最小规模和最大规模的的物业计算]

minimum-scale –允许用户缩放到的最小比例 [默认：0.25，范围：0 - 10]

maximum-scale –允许用户缩放到的最大比例 [默认值：1.6，范围：0 - 10]

user-scalable –用户是否可以手动缩放 [默认：是的，选项：yes或no]

二、HTML5标签的使用