iphone手机上"添加至主屏幕的图标"怎么设置?

在iphone手机上,网站可以添加到主屏幕,默认情况下,一个网站被添加到主屏幕时,默认显示的是网站截图,如何才能显示成我们自己想要设置的图标呢?我在实际工作中遇到了这个需求,将实现步骤总结如下:

1.制作4中不同尺寸的图片:

2.vue项目中,需将4张图片放到static文件中

3.在index.html的之间添加以上代码

4.部署上线

5.完成上述步骤后,在safari中打开网址


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


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

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

 图标设置的属性分为:

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

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