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

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

苹果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属性为“设计原图图标”;

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

连接一下Mobile WEB开发的相关文章:

 

原文地址:http://www.iptu.net/index.php/archives/3109.iptu

adpics.aspx?source=kbh1983&sourcesuninfo
目录
相关文章
|
16天前
|
iOS开发
解决使用document.activeElement.blur()禁止弹出手机默认键盘ios版本17以上会出现闪屏问题
解决使用document.activeElement.blur()禁止弹出手机默认键盘ios版本17以上会出现闪屏问题
14 2
|
iOS开发
iOS 启动图设置及icon图标设置
OS 启动图设置及icon图标设置
736 0
iOS 启动图设置及icon图标设置
|
iOS开发
iOS开发-如何把广告,图片通过代码加到Screen上
iOS开发-如何把广告,图片通过代码加到Screen上
65 0
|
iOS开发 Windows
[Apple,Store,iPod,Touch,iPod]8大实用又重要Mac使用技巧
  一、区分App Store、iTunes Store、Apple Store   【App Store】是苹果公司经营的应用商店,供iPhone、iPod Touch、iPad以及Mac等设备的用户下载各种应用程序。用户可以购买收费项目和免费项目,让该应用程序直接下载安装到iPhone或iPod touch、iPad、Mac等设备。
112 0
Meego touch基本控件介绍—Button篇
前面我们也写过关于meegotouch的两个小程序,相信大家对meegotouch的界面风格都有一定的感观认识,今天写了一个关于button的小程序,一起了解下button的性质。至于button的分类和基本概念,可以点击这里查看。
741 0
Meego touch实现页面跳转和返回
前面写完了第一个Meego touch的程序,相信大家也看到Meego touch的界面风格,显示效果等等。不过却没有页面跳转,和返回等效果,那这篇文章就研究下,如何实现页面的跳转和返回?Meego touch默认会通过返回键或者退出键实现当前页面的关闭,并且返回到前一个页面。
925 0
|
iOS开发
iOS App Icon启动图尺寸配置适配iPhone XS XR XS Max等
前言 近期在开发新项目, 然后针对 App Icon 与 App LaunchScreen 都需要重新切一套, 需要把相应尺寸大小跟 UI 说明一下, 加上最近刚发布的我 iPhone XS XR XS Max都需要进行统一适配,同时为了让自己以及 UI 同事能更好的去了解 iPhone 不同尺寸特意整理了一下。
3593 0
|
C# Windows
WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)
原文:WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)      在上一篇我们介绍了如何在WPF 4 中开发Windows 7 跳转列表,本篇将继续针对WPF 4 中任务栏其他功能:覆盖图标(Overlay Icon)、进度条(Progress Bar)、缩略图工具栏(Thumbnail Toolbar)进行研究。
1143 0