搜索

请问苹果自带浏览器将网页保存到桌面时的图标如何设置?

[复制链接]
逝风 发表于 2018-8-21 23:29:42 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册加入

x
如题,如何设置苹果自带浏览器safari讲网页保存到桌面 桌面图标如何设置?请高人解答 在此谢过。
admin 发表于 2018-8-22 14:43:22 | 显示全部楼层
  1. <link rel="apple-touch-icon" sizes="114x114" href="images/logo.png" />
复制代码
这个属性是当用户把连接保存到手机桌面时使用的图标,如果不设置,则会用网页的截图。有了这,就可以让你的网页像APP一样存在手机里了
在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
apple-touch-icon是IOS设备的私有标签,如果设置了相应apple-touch-icon标签,则添加到主屏上的图标会使用指定的图片。
区域加入下面代码即可。
apple-touch-icon 标签支持sizes属性,可以用来放置对应不同的设备。
分别放置57×57(默认值)的图标对应320×640的老设备,72×72对应ipad,114×114对应retina屏的iPhone及iTouch

图片无需做圆角处理,同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

各尺寸自适应代码:
默认:57x57,iPad:72x72,iPhone 4,Retina屏:114x114(原尺寸的2倍)
  1. <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
  2. <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
  3. <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
复制代码



回复

使用道具 举报

小黑屋|海洋CMS

GMT+8, 2019-2-16 06:12 , Processed in 0.123810 second(s), 23 queries .

Powered by SeaCMS!

© 2015-2018 seacms.net.

快速回复 返回顶部 返回列表