apple-touch-icon属性详解

2015-06-03阅读(4240)评论(0)牵着狗狗看MM

苏州实时公交查询

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

将网站添加到主屏幕

[html]
<link href="icon-57.png" rel="apple-touch-icon" sizes="57×57" />
<link href="icon-72.png" rel="apple-touch-icon" sizes="72×72" />
<link href="icon-114.png" rel="apple-touch-icon" sizes="114×114" />
<link href="icon-144.png" rel="apple-touch-icon" sizes="144×144" />
[/html]

apple-touch-icon 标签支持sizes属性,可以用来放置对应不同的设备。
57×57(默认值)的图标对应320×640的iphone老设备,72×72对应ipad,114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。

上面还有一种写法:

[html] <link href="icon-57.png" rel="apple-touch-icon-precomposed" sizes="57×57" />
<link href="icon-72.png" rel="apple-touch-icon-precomposed" sizes="72×72" />
<link href="icon-114.png" rel="apple-touch-icon-precomposed" sizes="114×114" />
<link href="icon-144.png" rel="apple-touch-icon-precomposed" sizes="144×144" />
[/html]

这样写的话,就是去掉iOS中自动给图标添加的那层高光。

加上启动画面

[html]
<link rel="apple-touch-startup-image" sizes="768×1004" href="/splash-screen-768×1004.png" /> <!– iPad 竖屏 768 x 1004(标准分辨率) –>
<link rel="apple-touch-startup-image" sizes="1536×2008" href="/splash-screen-1536×2008.png" /> <!– iPad 竖屏 1536×2008(Retina) –>
<link rel="apple-touch-startup-image" sizes="1024×748" href="/Default-Portrait-1024×748.png" /> <!– iPad 横屏 1024×748(标准分辨率) –>
<link rel="apple-touch-startup-image" sizes="2048×1496" href="/splash-screen-2048×1496.png" /> <!– iPad 横屏 2048×1496(Retina) –>
<link rel="apple-touch-startup-image" href="/splash-screen-320×480.png" /> <!– iPhone/iPod Touch 竖屏 320×480 (标准分辨率) –>
<link rel="apple-touch-startup-image" sizes="640×960" href="/splash-screen-640×960.png" /> <!– iPhone/iPod Touch 竖屏 640×960 (Retina) –>
<link rel="apple-touch-startup-image" sizes="640×1136" href="/splash-screen-640×1136.png" /> <!– iPhone 5/iPod Touch 5 竖屏 640×1136 (Retina) –>
[/html]

iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。

[html] <link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
[/html]

启动画面的图片尺寸并非完全等于设备的尺寸,比如iPad2的尺寸是1024×768,但它的启动画面尺寸横向是1024×748,竖向尺寸是768×1004,因为需要减去系统状栏的高度20px,而使用的Retina屏幕的iPhone4以及iPad3则需要减去状态栏的高度40px。

Web App运行起来要像Native App,那么就要去掉Safari的一些默认控件,比如地址栏、状态栏之类的。

[html]<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
[/html]

参考文章:https://developer.apple.com/library/ios/qa/qa1686/_index.html

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » apple-touch-icon属性详解
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏