为 iPhone 和 iPad 自定义网站的主屏幕图标

标签: Web Home Screen Icon iPad iPhone | 发表时间:2011-08-31 08:15 | 作者:mg12 丸子
分享到:
出处:http://www.neoease.com

iPhone 和 iPad 等苹果设备使用主屏幕 (Home Screen, 也称桌面) 管理应用程序, 还可以通过浏览器的添加到主屏幕功能将网站链接作为快捷方式添加为主屏幕图标.

是否你也想过为网站定义一个图标, 如果用户将网站添加至主屏幕, 网站链接看起来更像原生程序, 也能获得更多的关注. 除了兼容手机端的浏览体验, 我们还能做得更多, 为 iPhone 和 iPad 自定义网站的主屏幕图标也算其中之一, 本文将对网站的主屏幕图标及其设定方法为进行详细介绍.

网站的主屏幕图标

iPhone/iPad 上的原生浏览器可以向主屏幕添加小图标, 作为网站入口. 如下:

Add to Home Screen

如果网站没做过兼容处理, 小图标显示的是网页截图. 效果如下:

Web Clip as App Icon

我们再看看 Apple 自己的页面, 它已经设定了主屏幕图标, 效果如下:

PNG image as App Icon

设定主屏幕图标

看到上面的截图, 我想你会打算自定义一个图标了. iOS 的网页图标与传统的网页 favicon 相似, 处理方式也差不多, 下面会为你介绍几种处理方式.

放置在默认位置

创建一个 PNG 图片, 命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png, 放置在网站根目录即可.

指定图标路径

为页面指定一个图标路径, 在网页的 head 部分代码如下:

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

为不同设备指定图标

在网页中为不同的设备指定特殊图标, 因为 iPhone 和 iPad 的图标尺寸不一样, 需要 sizes 属性来进行区分, 如果没有定义 sizes 属性, 默认 sizes 是 57 x 57. 代码如下:

<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-iphone4.png" />

如果没有图片尺寸可以匹配设备图标的尺寸, 存在比设备图标大的图片, 将使用比设备图标尺寸略大的图片; 如果没有比设备图标大的图片, 则使用最大的图片.

如果没有在网页中指定图标路径, 将会在根目录搜寻以 apple-touch-icon... 和 apple-touch-icon-precomposed... 作为前缀的 PNG 图片. 假设现在有一个设备的图标大小是 57 x 57, 系统将按以下顺序搜寻图标:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

主屏幕图标尺寸

iPhone 和 iPod (iTouch) 使用的图标尺寸:

  • 57 x 57 pixels
  • 114 x 114 pixels (高分辨率, iPhone 4 或以上使用)

iPad 使用的图标尺寸:

  • 72 x 72 pixels

主屏幕图标效果

当我们将图片作为主屏幕图标, iOS 系统会自动为图标加上视觉效果:

  • 圆角
  • 阴影
  • 高亮

例如, 一个 57 x 57 的网站图标如下:

当用户将网页添加到主屏幕, 图标会加上上述效果, 如下:

所以我们无需对图片做太多处理, 提供符合尺寸的正方形图片即可.

无论是将图标放在默认位置上, 还是指定图标路径, 如果图标带有 -precomposed 后缀 (如: apple-touch-icon-precomposed.png), 系统将不会为你加上高亮效果.

后话

本文参考了 Safari 开发文档的两篇文章:《Configuring Web Applications》《Custom Icon and Image Creation Guidelines》. 主要摘要了关于主屏幕图标的一些内容, 如果发现错漏和疑问, 请留言反馈.

我也为这个博客添加主屏幕图标, 同学们可以在设备中打开试试效果.

Related Articles


Copyright © 2007-2010 NeoEase. All rights reserved.
NeoEase.com | Creative Commons

相关 [iphone ipad 定义] 推荐:

为 iPhone 和 iPad 自定义网站的主屏幕图标

- 丸子 - NeoEase
iPhone 和 iPad 等苹果设备使用主屏幕 (Home Screen, 也称桌面) 管理应用程序, 还可以通过浏览器的添加到主屏幕功能将网站链接作为快捷方式添加为主屏幕图标. 是否你也想过为网站定义一个图标, 如果用户将网站添加至主屏幕, 网站链接看起来更像原生程序, 也能获得更多的关注. 除了兼容手机端的浏览体验, 我们还能做得更多, 为 iPhone 和 iPad 自定义网站的主屏幕图标也算其中之一, 本文将对网站的主屏幕图标及其设定方法为进行详细介绍.

苹果怒告 Samsung『复制 iPhone、iPad』

- Jarod - Engadget 中国版
不过第一个遭殃的对象,并不是广大的致敬机,而是 Samsung 家一海票的手机、平板;根据华尔街日报报导,苹果上周五前正式对 Samsung 提出告诉,说 Samsung 复制了 iPad / iPhone 的外观跟界面,而涉及到的手机、平板包括了 Galaxy S 4G、Epic 4G、Nexus S 以及 Galaxy Tab(七寸).

因为 iPad,我不再需要 iPhone

- Jim - 爱范儿 · Beats of Bits
John Brownlee 是一位 iPhone 3GS 和 iPad 用户. 在一次外出的过程中,他的 iPhone 再次不慎遗失. 不过这一次他没有慌乱,甚至没有试图去找回 iPhone,而是购买了一台 feature phone —— 诺基亚 C3-00. 没有受困于功能的落后,John 很喜欢 C3-00.

Opera Mini 6 for iPhone和iPad发布

- Seaver - Solidot
51开源社区 写道 "Opera周二公布了面向苹果iPhone和iPad的新移动浏览器Opera Mini 6. Opera是目前全球使用最广泛的移动浏览器. Opera称,Opera Mini 6具备一个多功能键,用户可以借此在Facebook、vKontakte和My Opera上发布和共享信息.

伪装成世界最大iPhone的iPad

- 翔晨 - Engadget 中国版
这是放在英国St Pancras车站的宣传广告牌,主要是要帮App Store新推的一个游戏 - Lara Croft Guardian of Light(古墓奇兵新系列)作宣传,一共享了56部iPad当成超大iPhone 4外壳的屏幕,不失为一种广告手法,而且建制成本稿不好彼等大尺寸的电视墙便宜也说不定.

iPhone和iPad更能吸引注意力

- Stan - 36氪
相信大家也看到了,移动互联网是现在的一大热点. 由苹果开启的移动互联网的变革,使得现在移动产品的竞争非常激烈. 各大科技巨头都不断的加入到这场竞争中来,有的风光无限,比如苹果,有的是不断的壮大,比如Android大军,有的被打的鼻青脸肿,比如TouchPad,有的正凭借其在PC中的统治地位要挤进移动领域,比如微软和它的windows8.

iPhone和iPad Web开发上手指南

- - 互联网的那点事
感谢上天,iPhone操作系统上的Safari浏览器幸好是一款优秀的浏览器. 跟桌面版的Safari 4一样,它对CSS3及HTML5有良好的支持. 另外它也提供若干一流的界面元素供即用,不过这些界面元素在iPhone和iPad之间有时还存在差别. 另外,由于iPhone操作系统面世已经很长一段时间了,网络上有很多资源可供利用.

苹果发布 iPad Pro、新款 Apple TV、iPhone 6s 和 iPhone 6s Plus

- - 理想生活实验室
北京时间 9 月 10 日凌晨,苹果 2015 年秋季发布会在美国旧金山的比尔格拉汉姆公民大礼堂进行,在越来越难以保密的今天,发布会之前泄露的消息几乎都成为现实,不过各个产品功能细节也仍然带来了惊喜,在此前 WWDC 更多强调应用的情况下,这次的发布会四款新品亮相,无论是数量规模还是在各自产品线上的意义,这次的发布会都显得诚意十足,干货相当多.

每周 iPhone/iPad 应用推荐:ZAKER (for iPhone),美图秀秀HD,微情绪…

- 狒狒 - 我爱水煮鱼
越来越多的同学开始使用 iPhone 和 iPad,而 iPhone 和 iPad 最好玩的就是他上面的应用,从这个星期起我给大家推荐下每周热门的 iPhone/iPad 应用. 什么是 iPhone/iPad 最佳的阅读体验,我想 Zaker 在 iPad 上已经给大家了答案,Zaker 也在 iPad 大获成功,目前已经有 50 多万的装机量了.

iPhone Dev Team製作了工具專為iPhone 4S及iPad 2降級而設

- - winandmac.com香港版
iPad 2及iPhone 4S早前已經有完美的iOS 5.0.1 jailbreak,不過有些人就是不小心把它們升級至最新firmware,失去完美jailbreak. 大家其實還是有方法可以降級,現在iPhone Dev Team更製作了redsn0w新版,專門協助降級而設. 用家可以 按此處下載Mac的版本,又或 此處下載Windows的版本,其版本為redsn0w 0.9.11b2.