html – 正确的iOS网络剪辑集成(Web应用程序图标)

2023年11月10日 188次阅读

我决定更改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和&amp ;;出现的网络应用程序图标的绝对正确方法是什么. IOS 7？

最佳答案 每
documentation,

To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

<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">

The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

所以从技术上讲,你的新方法应该没问题.请注意,文档列出了iOS 7的大小.如果您具有所有正确的大小,则将专门使用它们.

如果你没有所有正确的尺寸,

the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

这意味着您可以只包含iOS 7尺寸.我认为没有任何理由去添加或删除旧图标.但如果质量要求,请为所有版本的iOS包含正确的尺寸.

如果没有使用html中的链接元素指定图标

the website root directory is searched for icons with the apple-touch-icon… prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

apple-touch-icon-76×76.png

apple-touch-icon.png

因此,只要您正确命名文件并将它们放在根目录中,您实际上就不必使用链接元素.

这是Apple的Specifying a Webpage Icon for Web Clip文档的链接

点赞