web app的一些特殊meta和link标签

 

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >

设置viewport

 

<meta content="telephone=no" name="format-detection" />

禁用电话

 

<meta name="apple-mobile-web-app-capable" content="yes" />

启用web app。添加至主屏后，从主屏进入会隐藏地址栏和状态栏

 

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

设置顶部电话信号那一栏的样式，可用值有default 、black、black-translucent三种，其中第三种为半透明，不占高度。

 

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

设置主屏的图标。该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）

 

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

启动界面的图片。该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。官方规定启动界面的尺寸必须为 320*460（px），原本以为Retina屏幕可以支持双倍，但是不支持，图片显示不出来。

参考网站：

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

http://blog.sina.com.cn/s/blog_492b71ba0100qdx0.html

http://www.prower.cn/technic/2314