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

摘要:
苹果Safari浏览器中准备的苹果触摸图标和苹果触摸图标属性存在差异。我之前在互联网上查看了相关信息和苹果的开发文档手册,但没有足够详细地解释这两个属性之间的差异,导致开发过程中出现一些混乱。

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

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

图标设置的属性分为:

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

直接上图:

apple-touch-icon-precomposed 和 apple-touch-icon属性区别第1张

图片一:

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

apple-touch-icon-precomposed 和 apple-touch-icon属性区别第2张 apple-touch-icon-precomposed 和 apple-touch-icon属性区别第3张

放大看大图:注意图标上面的光泽感,看明白了吧,使用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属性为“设计原图图标”;

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

免责声明:文章转载自《apple-touch-icon-precomposed 和 apple-touch-icon属性区别》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Activemq JolokiaMAC中Parallels Desktop windows忘记密码的解决办法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

iOS开发关于真机—App发布证书和调试证书配置

发布证书、真机调试证书、测试证书、推送证书详细过程 更重要的是让你彻底明白为什么要这样配置证书 一:发布证书 遵旨:哪个开发者的哪台电脑要发布哪个app (这句话可以多读几遍) 通过上边的遵旨可以得出要发布app需要哪些文件,为什么配置过程中要上传或者生成那些文件,结论如下 申请开发者账号,即花费了99刀给apple的账号,这是你可以登录develo...

css样式匹配苹果个型号手机

/*适配苹果X*/ @media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .header_nav { top:44px; } } /*适配苹果X smart Max*...

iOS获取手机型号,Swift获取手机型号(类似iphone 7这种,检测机型具体型号)

获取手机设备信息,如name、model、version等, 但如果想获取具体的手机型号,如iphone5、5s这种,就需要如下这种(含Swift和OC两种写法) Swift建议添加到extension,使用简单,直接新建个extension,拷贝下面代码进去即可。 以下是最新的类型:一直到iPhone X import Foundation impor...

macOS应用程序如果在打开时提示崩溃,该怎么解决

macOS应用程序如果在打开时提示崩溃,该怎么解决?最近一次Apple静默更新之后,Apple删除了TNT的证书,因此应用程序将在7月12日之后崩溃。目前的解决方案是自己签名。 检测软件签名是否存在 1.打开终端,输入【sudo -s】2.然后会提示你输入开机密码,你就把密码输入***,输入过程中不会显示密码,输入完成后按确认键enter3.然后再终端输入...

ThinkPad X1 Carbon 2016 (4th)安装黑苹果MacOS High Sierra(10.13)

原文参考:https://forum.51nb.com/forum.php?mod=viewthread&tid=1808874&extra=page=1&page=1 不同的是,maj的配置是i7,我的是i5,主板芯片组也不一样。他的EFI大部分能通用。 安装镜像:黑果小兵(macOS High Sierra 10.13.1(17...

苹果APP上架App Store审核被拒常见问题解释

苹果APP的审核是一道大难关,遇见被拒是很正常的事情,如果被拒就根据反馈问题,和下面提供的思路去寻求解决方案。 苹果审核大体分为三部分,预审、机审和人工审核。 ipa包上传后首先进入的是预审,会被扫描API等,预审通过后会在https://itunesconnect.apple.com/后台活动那出现构建版本,然后才可以提交审核(如果没通过,会有反馈...