移动端web开发-mate标签大用处

一添加到主屏后的标题（IOS）

<meta name="apple-mobile-web-app-title" content="标题"> 

二启用 WebApp 全屏模式（IOS）

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）

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

三百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

四设置状态栏的背景颜色（IOS）

设置状态栏的背景颜色，只有在"apple-mobile-web-app-capable" content="yes"时生效

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

• content 参数：
• default ：状态栏背景是白色。
• black ：状态栏背景是黑色。
• black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。
  如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

五移动端手机号码识别（IOS）

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接。

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

六移动端邮箱识别（Android）

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

七添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

八添加到主屏后的APP图标

指定web app添加到主屏后的图标路径，有两种略微不同的方式：

<!-- 设计原图 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- 添加高光效果 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">