iPhone、新 iPad 和 Android 主屏幕中的图标质量答案

【问题标题】：icon quality in home screen for iPhone, new iPad & AndroidiPhone、新 iPad 和 Android 主屏幕中的图标质量
【发布时间】：2012-08-27 21:27:06
【问题描述】：

我开发了我的第一个网络应用程序http://checkamy.herokuapp.com。我正在使该应用程序与所有常见设备兼容。但是，我在制作移动主屏幕图标时遇到了问题。

我在 HTML 中有这两行：

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

分辨率：

apple-touch-icon.png -> 114x114
apple-touch-icon-precomposed.png -> 57x57

在 Android 上没问题，但我无法让它在新 iPad 和 iPhone 4S 上正常显示。

质量很差。 Apple 设备似乎使用 apple-touch-icon-precomposed.png 作为主屏幕图标。

我的问题是：

如何使图标在新旧智能手机设备中美观？

附言我想让它兼容 Android 2.2、iPhone 3G 和 4S 等旧设备...

仅供参考，我正在使用 Coffeescript、jQuery 和 Ruby on Rails 来构建它。

非常感谢您的帮助！

【问题讨论】：

标签： android iphone ipad web-applications homescreen

【解决方案1】：

请参阅 Apple 文档 here，了解如何为多种分辨率指定多个图标。

请注意，apple-touch-icon-precomposed不用于不同的分辨率，而是表示图像上的“光泽度”已被应用（因此 iOS 不应在图像上应用自己的光泽度）跳板表示）。

对于能够以原始分辨率处理所有当前 iDevices 的全套设备，您需要这样的东西，其中图像实际上是 sizes= 中引用的大小，如果没有引用大小，则为 57x57。：

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

【讨论】：

【解决方案2】：

试试The Icons Slayer。它会为您生成许多看似合理的图标大小。

【讨论】：