apple-touch-icon-precomposed 和 apple-touch-icon属性区别

转载 2016年08月30日 18:19:24

苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的,之前在网上查了下相关的资料和苹果的开发文档手册,对这两中属性区别说的不够详细,导致现在大家开发的时候有些混淆。

苹果safari浏览器定义的这两种属性是为了苹果移动设备(ipod、ipad、iphone)对移动网站-mobile web进行收藏(“添加到桌面图标”)的时候增加的图标定义属性,当你建立一个移动网站(俗称:手机站,mobile web),避免不了为移动站的图标进行设置(这里有篇关于苹果meta设置详解的文章>>点击查看<<),在这篇文章当中尚未介绍这两中属性的区别,这篇文章就是弥补这一空缺。

图标设置的属性分为:

apple-touch-icon 和 apple-touch-icon-precomposed两种属性,从字面意思上可以看出,第一个是 “苹果移动设备图标”,第二个为“苹果移动设备初始图标样式”,由于第二个的意思完全搞不明白预设是预设的什么究竟有什么不同的地方,从官方资料当中也没有搞懂有什么明显的不同,通过实验得知了这两个明显的差异。

直接上图:

图片一:

从图中(图片一)右下角可以看出有两个Milanoo图标,分别是apple-touch-icon 和 apple-touch-icon-precomposed属性的图标,看出区别了没?

 

放大看大图:注意图标上面的光泽感,看明白了吧,使用apple-touch-icon属性的明显比使用apple-touch-icon-precomposed图标多出一个高光,因为在ios系统中对icon有一套规范,就是在ios设备的图标统一为“四边圆角”、“高光处理”,至于“图标阴影”,是ios设备中统一为所有桌面元素增加的,所以不作为图标单独处理的样式,由于在视觉上统一最重要的是形状的统一,所以“圆角”是必须的,但是对于“高光”苹果没有做出特别的强调,所以苹果设置当中把“高光”作为可选项,就产生了apple-touch-icon 和 apple-touch-icon-precomposed属性。

结论:

  • 使用apple-touch-icon属性为“增加高光光亮的图标”;
  • 使用apple-touch-icon-precomposed属性为“设计原图图标”;

大家牢记了,说了通篇感觉最有用的就是最后两句。哈哈。

文中的链接

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

触摸屏网站开发:http://www.iptu.net/archives/2955.html

苹果ios 浏览器Safari :apple-touch-icon.png apple-touch-icon-precomposed.png

打开自己的网站访问日志,发现出现很多404的地址,地址分别都是这2个: 1)http://www.zbphp.com/apple-touch-icon.png 2)http://www.zbphp...
  • default7
  • default7
  • 2014年04月16日 12:15
  • 7635

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

可以在iPhone/iPod Touch上将网页"添加至主屏幕"时,去掉icon上那恶心的透明层. ie显示不了小图片,但Firefox能显示出来 请教各位,怎么能让IE最好是...
  • tfy1332
  • tfy1332
  • 2014年04月03日 16:39
  • 4217

apple-touch-icon和apple-touch-icon-precomposed区别使用

在iPhone/iPad等苹果移动设备上,可以把网站”添加至主屏幕”,添加时的图标可以在HTML中自定义设置图片。 可以使用apple-touch-icon和apple-touch-icon-p...
  • longwenjunjie
  • longwenjunjie
  • 2014年11月19日 10:19
  • 286

IOS apple-touch-icon属性

apple-touce-icon属性是专门为APPLE的touch,iphone,ipad的Safari浏览器上使用的,
  • Angela_success
  • Angela_success
  • 2014年09月23日 23:51
  • 951

webapp 图标apple-touch-icon-precomposed和apple-touch-icon区别

apple-touch-icon-precomposed和apple-touch-icon 是苹果safari浏览器定义的这两种属性,是为了苹果移动设备对移动网站(web app)添加到桌面的时候增加...
  • Feiin
  • Feiin
  • 2012年11月14日 23:14
  • 1191

苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究

苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的,之前在网上查了下相关的资料和苹果的开发文档手册,对这两中属性区别...
  • stoneson
  • stoneson
  • 2013年12月18日 17:31
  • 839

移动端开发meta标签的使用

移动端开发meta标签的使用 一、viewport的使用, 在浏览器中页面将以原始大小显示,并不允许缩放 注释: initial-scale:初始的缩放比例(范围从>0...
  • qq_25065257
  • qq_25065257
  • 2017年12月28日 10:29
  • 108

类成员—字段和属性的区别

字段用于直接存取数据,而属性本身不能够直接存取数据,它相当于包裹在字段外的一层壳,用于对其内部字段的访问进行权限控制。 这句话又怎么去理解?打个比方,假设“水”代表数据,“被子”代表字段,“保险箱”代...
  • a_asdfgh
  • a_asdfgh
  • 2016年09月19日 22:38
  • 2813

关于Python的属性、参数、方法的解释、区别

关于Python的属性、参数、方法的解释、区别
  • myfancysky
  • myfancysky
  • 2015年06月15日 02:31
  • 1754

解惑——iOS中成员变量和属性区别

一篇文章告诉你到底怎么区别iOS成员变量和属性的前世今生
  • u012946824
  • u012946824
  • 2016年06月30日 10:56
  • 6266
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:apple-touch-icon-precomposed 和 apple-touch-icon属性区别
举报原因:
原因补充:

(最多只允许输入30个字)