苹果触摸图标的正确像素尺寸是多少?

时间:2020-03-05 18:37:36  来源:igfitidea点击:

我不确定正确的尺寸是多少。

许多网站似乎都在重复苹果触摸图标应为57x57像素,但引用断开的链接作为其来源。

汉瑟曼(Hanselman)和游乐场蓝调(注释)建议使用不同的尺寸,包括163x163和60x60。

苹果自己的apple.com图标是129x129!

请参阅我的相关问题:
如何为我的网站提供iPhone图标?

解决方案

回答

我认为没有"正确的尺寸"。由于iPhone确实在运行OSX,因此图标呈现系统非常强大。只要我们给它提供具有正确长宽比和至少与实际输出一样高的分辨率的高质量图像,操作系统就会非常干净地缩小比例。我的网站使用158x158,并且该图标在iPhone屏幕上看起来是像素完美的。

回答

取决于我们要拥有多少细节,它的长宽比必须为1:1(基本上是正方形)

我会选择苹果自己的129 * 129

回答

官方尺寸为57x57. 我建议使用确切的大小,仅仅是因为它在加载时会占用较少的内存(除非Apple缓存缩放的表示形式)。话虽如此,雷克斯(Rex)正确,任何正方形都可以使用

回答

我无法引用这些尺寸的数据源,因为官方参考已由ADC锁定和密钥。

但是,许多非NDA网站都提供了有关如何创建图标的教程。例如这里:

  • HOWTO:iPhone Webclip图标(2008年1月; Dan Dickinson撰写)

回答

从Apple Developer Connection Web Apps开发中心设计内容的Google缓存中...

Create a Web Clip Bookmark Icon
  
  iPhone and iPod touch allow a user to
  save a Web Clip bookmark to your site
  on their Home Screen.
  
  To specify a bookmark icon for all
  pages of a web site, place a PNG image
  named "apple-touch-icon.png" at the
  root directory of your web server -
  similar to the "favicon.ico" for site
  icons.
  
  To override the site bookmark icon on
  a specific web page, insert a <link>
  element similar to <link
  rel="apple-touch-icon"
  href="/customIcon.png"/> within the
  <head> element of the page.
  
  The bookmark icon dimensions should be  57x57 pixels.  If the icon is a
  different size it will be scaled and
  cropped to fit.
  
  Safari will automatically composite
  the icon with the standard "glassy"
  overlay so it looks like a built-in
  iPhone or iPod application.

回答

NilObject的链接将我引到了makentosh.com上关于Icon的精彩博客文章Catchup

... Of course all of this inconsistency
  had to be dealt with eventually,
  right? Well 2.0 dealt with it in fine
  fashion! Finally 57x57 actually meant
  57x57.
  
  ...each and every pixel ... rendered
  perfectly.

回答

截止到2010年8月3日,Apple准则似乎将"高分辨率"图像(适用于iPhone 4)包括在"必需"图标大小中。

看来我们现在需要同时提供57x57和114x114的图片以及640x960的标题图片。

请参阅自定义图标和图像创建准则(需要Javascript),该准则是整个文档的一部分:

  • iOS人机界面指南(2013; Apple Inc; PDF; 26.3 MB)