chaihongjun.me

2016年最新前端必知的移动互联网HTML5Head头标签-iOS原生浏览器

2016年最新前端必知的移动互联网HTML5Head头标签-iOS原生浏览器

Apple iOS原生浏览器

添加智能 App 广告条

告诉浏览器这个网站对应的app,并在页面上显示下载banner,需要注意的是Smart App Banners标签不能用在frame框架内部,否则不起作用。

其中app-id(必须), affiliate-data (可选), app-argument (可选)

<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

例如Digg的写法:

<meta name="apple-itunes-app" content="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://">

忽略数字自动识别为电话号码

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

启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes">
添加到主屏后设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black">

只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。

  • 如果设置为 default 或 black ,网页内容从状态栏底部开始。

  • 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

添加到主屏后的标题(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="App Title">

iOS 图标

图片自动处理成圆角和高光等效果。

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

禁止系统自动添加效果,直接显示设计原图。

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

iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必须的
在大多数情况下,在head中一个180×180px的图标就足够了。如果您想要由设备确定的唯一图标,请使用不同大小的图标。

<link rel="apple-touch-icon" sizes="57x57" href="path/to/icon@57.png">
<link rel="apple-touch-icon" sizes="72x72" href="path/to/icon@72.png">
<link rel="apple-touch-icon" sizes="114x114" href="path/to/icon@114.png">
<link rel="apple-touch-icon" sizes="144x144" href="path/to/icon@144.png">

启动画面 ( 不赞成使用 )

iPad 的启动画面是不包括状态栏区域的,iPhone 和 iPod touch 的启动画面是包含状态栏区域的

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

具体描述设置请查看http://www.css88.com/archives/5480中相应的说明。

iOS 应用深度链接

<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:愚人码头»