一添加到主屏后的标题(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">