关于Apple设备私有的apple-touch-icon属性详解
以前我们用过favicon在浏览器给网站进行身份标识,用法如下:
- <link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" />
- <link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" />
现今移动设备越来越多,苹果为iOS设备配备了apple-touch-icon私有属性,添加该属性,在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户以后访问。实现方法是在HTML文档的<head>标签加入下面代码即可。
- <link rel="apple-touch-icon" href="/custom_icon.png"/>
apple-touch-icon 标签支持sizes属性,可以用来放置对应不同的设备。
57×57(默认值)的图标对应320×640的iphone老设备,72×72对应ipad,114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。
这是官方开发社区的详细介绍:
Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)
When iOS displays your app icon on the Home screen of a device, it automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:
Rounded corners
Drop shadow
Reflective shine (unless you prevent the shine effect)
Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later).
Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:
Has 90° corners
Does not have any shine or gloss
所以最完善的写法应该是:
- <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
- <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
- <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
- <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />
虽然官方都用的png图片做说明,但实际测试jpg格式也可用(不推荐),图片无需做圆角和高光效果,同Native App一样,系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果,可以用apple-touch-icon-precomposed代替apple-touch-icon,这时我们提供的图标就要自己做圆角和高亮效果了。
图标搜索的优先级如下:
如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标,会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57,优先级如下:
apple-touch-icon-57×57-precomposed.png
apple-touch-icon-57×57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
在第三代 iPad 上有四种图标规格: 57x57, 72x72, 114x114, 144x144.
由于 retina 图标的尺寸是标准图标大小的2倍,因此实际上我们只需要只做2款图标即可:114 x 114 和 144 x 144 。 将retina 图标的大小设置成标准图标的尺寸,那么IOS就会根据情况自动进行缩放了。
- <!-- Standard iPhone -->
- <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
- <!-- Retina iPhone -->
- <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
- <!-- Standard iPad -->
- <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
- <!-- Retina iPad -->
- <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
官方开发社区《iOS Human Interface Guidelines》地址http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.
关于Apple设备私有的apple-touch-icon属性详解的更多相关文章
- Icon资源详解[2]
本文分享&备忘最近了解到的icon资源在windows平台下相关的一部分知识.所有测试代码都尽可能的依赖win32 API实现.通过源码可以了解其结构,同时它们也是可复用的代码积累. ...
- Linux设备驱动模型之platform(平台)总线详解
/********************************************************/ 内核版本:2.6.35.7 运行平台:三星s5pv210 /*********** ...
- Icon资源详解[1]
本文分享&备忘最近了解到的icon资源在windows平台下相关的一部分知识,所有测试代码都尽可能的依赖win32 API实现.更全面的知识,参考文末列出的”参考资料“. 关键字:I ...
- UIView的Touch事件UIControlEvents详解
首先,UIControlEvents有这个几种: UIControlEventTouchDown = << , // on all touch downs UIControlEventTo ...
- 移动设备web开发插件iScroll的使用详解
地址:http://blog.nnnv.cn/index.php/archives/65
- 网络电话pjsip Getting Started: Building for Apple iPhone, iPad and iPod Touch
Getting Started: Building for Apple iPhone, iPad and iPod Touch ¶ Getting Started Preparation Get th ...
- 如何将多个 Apple 设备中保存在 iCloud 里面密码同步
如何将多个 Apple 设备中保存在 iCloud 里面密码同步 iCloud 钥匙串 密码同步 数据迁移 iOS iCloud 钥匙串会记住一些信息,因此您就无需记忆这些信息. 它会在您批准的任何设 ...
- 苹果新专利详解Apple Pay和NFC工作原理
本周,美国专利商标局公布了苹果一项名为“在移动支付过程中调节NFC的方法”专利申请.专利文件中详细描述了苹果Apple Pay功能以及NFC硬件构架和工作模式. 首先,苹果在专利文件中介绍了其无接触支 ...
- Android中处理Touch Icon的方案
苹果的Touch Icon相对我们都比较熟悉,是苹果为了支持网络应用(或者说网页)添加到桌面需要的图标,有了这些Touch Icon的网页链接更加和Native应用更相像了.由于苹果设备IPod,IP ...
随机推荐
- 常用的Git命令
我的常用的Git命令 Git仓库配置常用 1. clone 克隆一份远程的Git版本库 git clone git://github.com/someone/some_project.git some ...
- Uoj #131. 【NOI2015】品酒大会 后缀数组,并查集
#131. [NOI2015]品酒大会 统计 描述 提交 自定义测试 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个奖项, ...
- 【BZOJ-1901】Dynamic Rankings 带修主席树
1901: Zju2112 Dynamic Rankings Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 7292 Solved: 3038[Su ...
- 网易云音乐 歌词制作软件 BesLyric
导读 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦! BesLyric 为你排忧解难! 上个周末在用网易云音乐听歌,发现一些喜欢的歌还没有滚动歌词,然而网易云音乐还没有自带的歌词编辑功能,要制作歌 ...
- MongoDB 复制集(二) 选举 自动故障切换
一 复制集的高可用性简介 复制集通过故障自动切换来实现高可用性,当主节点出现故障的时候,从节点可以通过选举成为主节点,而这个过程在大多数当情况下是自动进行的,不需要手动干预.在某些情况 ...
- C# richTextBox编辑器
附件:http://files.cnblogs.com/xe2011/CSHARP_RichTextBoxEditor.rar 完整的转到这里 http://www.cnblogs.com/xe201 ...
- Visual Studio Package 插件开发
背景 这段时间公司新做了一个支付系统,里面有N个后台服务,每次有更新修改,拷贝打包发布包"不亦乐乎"...于是我想要不要自己定制个打包插件. 部分朋友可能会认为,有现成的可以去找一 ...
- [Angular 2] 8. Better ES5 Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 百度的android采访分析
今天早上10分,我接到一个电话采访百度.当然,我说提前.我的病是多么强烈延迟.所以我也没怎么准备,当然,我也看他们的真实水平的思考.在这次审查中! ! ! ! ! !! .! ! ! !.!! !.! ...
- spring入门之helloworld
1.第一个spring例子 1.建立工程 建立一个java project就可以. 导包,helloworld包括下面两个最少的包: 到http://www.springsource.org/down ...