未指定尺寸时，苹果触摸图标的尺寸是多少

Posted 2023-03-10

【中文标题】未指定尺寸时，苹果触摸图标的尺寸是多少

【英文标题】：What size is apple touch icon when no size specified

【发布时间】：2013-05-07 15:39:54

【问题描述】：

我读到有很多苹果触摸图标大小。

就这样：

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

在我购买的主题中，我的代码是这样的：

<link rel="apple-touch-icon" href="logo.png" /><style type="text/css" media="all">

所以问题是：图标应该是什么尺寸，如果没有指定尺寸，以及设备将如何处理它？

我猜，我会将图标设置为 144x144，以上所有内容都会适当缩小！

*参考：What size should apple-touch-icon.png be for iPad and iPhone 4?

【参考方案1】：

根据this Apple Developer page，如果没有指定大小，则默认为 57x57...但我相信如果您有一个更大的图标，设备会适当地缩放它，所以 144x144 可以工作。

如果您可以访问代码，为什么不更改其中的内容并指定不同的大小？这样，每台设备只会下载适合其屏幕大小的图像并节省一些带宽（这对于可能使用慢速 3G 甚至是 3G 之前的连接的移动设备很重要）。

需要注意的是，真的旧设备不理解“sizes”属性，最终会加载 last 指定的元素...所以您应该保留 57x57列表底部的图标。

最后，请注意，您的第一个示例代码中的文件名可以更改；如果“apple-touch-icon-114x114.png”对您来说比“apple-touch-icon-iphone4.png”更有意义，请随意使用它（或任何您喜欢的东西）。只需确保 href 属性中的 URL 与您使用的文件名匹配即可！唯一需要注意的是确保您有一个与四个默认图像之一匹配的文件，以便任何没有指定 apple-touch-icon 链接的页面仍然具有默认值。这四张图片是（按检查顺序）：

apple-touch-icon-57x57-precomposed.png apple-touch-icon-57x57.png apple-touch-icon-precomposed.png apple-touch-icon.png