[英]Correct iOS web clip integration (web app icon)
我决定更改iOS的网络应用程序图标。
这是我用来链接我的图标的方式:
<!-- iOS 7 iPad (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-152x152-precomposed.png"
sizes="152x152"
rel="apple-touch-icon-precomposed">
<!-- iOS 6 iPad (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-144x144-precomposed.png"
sizes="144x144"
rel="apple-touch-icon-precomposed">
<!-- iOS 7 iPhone (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-120x120-precomposed.png"
sizes="120x120"
rel="apple-touch-icon-precomposed">
<!-- iOS 6 iPhone (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-114x114-precomposed.png"
sizes="114x114"
rel="apple-touch-icon-precomposed">
<!-- iOS 7 iPad -->
<link href="/assets/img/misc/ios/apple-touch-icon-76x76-precomposed.png"
sizes="76x76"
rel="apple-touch-icon-precomposed">
<!-- iOS 6 iPad -->
<link href="/assets/img/misc/ios/apple-touch-icon-72x72-precomposed.png"
sizes="72x72"
rel="apple-touch-icon-precomposed">
<!-- iOS 6 iPhone -->
<link href="/assets/img/misc/ios/apple-touch-icon-57x57"
sizes="57x57"
rel="apple-touch-icon-precomposed">
这是我发现的新方法:
<link rel="apple-touch-icon" href="/assets/img/misc/ios/icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/misc/ios/icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/misc/ios/icon@2x.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/misc/ios/icon-72@2x.png" />
然而,当我在我上面测试时,新方法不起作用,所以我想知道为IOS6和IOS7制作网络应用程序图标的绝对正确方法是什么?
根据文档 ,
要为不同的设备分辨率指定多个图标(例如,同时支持iPhone和iPad设备),请为每个链接元素添加一个sizes属性,如下所示:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
使用最适合设备大小的图标。 如果未设置sizes属性,则元素的大小默认为60 x 60。
所以从技术上讲,你的新方法应该没问题。 请注意,文档列出了iOS 7的大小。如果您具有所有正确的大小,则将专门使用它们。
如果你没有所有正确的尺寸,
使用大于建议大小的最小图标。 如果没有大于推荐尺寸的图标,则使用最大的图标。
这意味着您可以只包含iOS 7尺寸。 我认为没有任何理由去添加或删除旧图标。 但如果质量要求,请为所有版本的iOS包含正确的尺寸。
如果没有使用html中的链接元素指定图标
在网站根目录中搜索带有apple-touch-icon ...前缀的图标。 例如,如果设备的相应图标大小为60 x 60,系统将按以下顺序搜索文件名:
苹果触摸图标76x76.png
苹果触摸的icon.png
因此,只要您正确命名文件并将它们放在根目录中,您实际上就不必使用链接元素。
这是Apple关于为Web Clip指定网页图标的文档的链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.