1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

1. 

2. 

3. 

4. 

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

2、关于Apple设备私有的apple-touch-icon和apple-touch-icon-precomposed的区别详解：

以前我们用过favicon在浏览器给网站进行身份表示，用法如下：

1.   

2. 

 现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的标签加入下面代码即可。

1. 

apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。

57×57（默认值）的图标对应320×640的iphone老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。

在iPhone/iPad等苹果移动设备上，可以把网站”添加至主屏幕”，添加时的图标可以在HTML中自定义设置图片。

可以使用apple-touch-icon和apple-touch-icon-precomposed这两种方法，两者区别是：

使用apple-touch-icon属性为“增加一层透明高光层的图标”

使用apple-touch-icon-precomposed属性为“设计原图图标”

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！