自定义网站在 iPhone 上的“添加至主屏幕”的图标

标签: Apple iPhone | 发表时间:2012-09-15 11:07 | 作者:Packy
分享到:
出处:http://fairyfish.net

iPhone 5发布了,虽然有些让人失望,但是 iPhone 的地位还是无可厚非的。随着移动设备的大军进入,各位站长是否有考虑过开发自己网站的 APP 呢?当然不是谁都有这技术的…这样,Safari 的一个叫“添加至主屏幕”的功能就引起了我的注意,我们可以通过它伪装出一个 APP 来。

但是大家是否有发现,“添加至主屏幕”后,那个图标是你网站的缩略图,不怎么好看。那么如何自定义网站“添加至主屏幕”的图标呢?Packy 研究了一番,发现其实很简单,只要在页面的head中添加相应代码就可以了。

自定义图标方法

我们先拿网易的代码看看:

  <link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-57x57-precomposed.png" rel="apple-touch-icon-precomposed">

<link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-114x114-precomposed.png" sizes="114x114" rel="apple-touch-icon-precomposed">

通过上面的这段代码,我们可以看出,Safari 是可以下载你指定的网站图标滴!

另外有些网站页面里没有添加代码至 head,但是 Safari 也能下载到图标,抓了一下包分析了一下,原来如果页面里没有,Safari 还会默认访问以下地址:

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

进阶

回到代码的方法,我们可以看到网易的代码里有 rel=这个属性,那么 apple-touch-icon-precomposed 和 apple-touch-icon的 区别是什么呢?详细的可以参考 苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究一文,Packy只给大家讲下结论:

apple-touch-icon:增加高光光亮的图标
apple-touch-icon-precomposed:设计原图图标

为了让大家直观的看出区别,可以参考下面这图:

注意图标上面的光泽感,看明白了吧,使用 apple-touch-icon 属性的明显比使用 apple-touch-icon-precomposed 图标多出一个高光。

因为在 iOS 系统中对 icon 有一套规范,就是在 iOS 设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”,是 iOS 设备中统一为所有桌面元素增加的,所以不作为图标单独处理的样式。

由于在视觉上统一最重要的是形状的统一,所以“圆角”是必须的,但是对于“高光”苹果没有做出特别的强调,所以苹果设置当中把“高光”作为可选项,就产生了 apple-touch-icon 和 apple-touch-icon-precomposed 属性。

总结

icon.png 的尺寸是114×114,

如果使用 apple-touch-icon 这个属性不需要做圆角和高光,iPad、iPhone 会自动加。

>>> 继续阅读全文 ...


欢迎关注我们关于 WordPress 技巧的微博:
新浪微博: http://weibo.com/wpjam
腾讯微博: http://t.qq.com/WordPressJam

© 我爱水煮鱼 / 收藏本文 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

相关 [定义 网站 iphone] 推荐:

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

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

自定义网站在 iPhone 上的“添加至主屏幕”的图标

- - 我爱水煮鱼
iPhone 5发布了,虽然有些让人失望,但是 iPhone 的地位还是无可厚非的. 随着移动设备的大军进入,各位站长是否有考虑过开发自己网站的 APP 呢. 当然不是谁都有这技术的…这样,Safari 的一个叫“添加至主屏幕”的功能就引起了我的注意,我们可以通过它伪装出一个 APP 来. 但是大家是否有发现,“添加至主屏幕”后,那个图标是你网站的缩略图,不怎么好看.

我常用的iphone开发学习网站[原创]

- Azad - 博客园-首页原创精华区
Box2D的 - 首页如何只使用碰撞检测的cocos2d iPhone Box2D的|雷Wenderlich“一个SpaceManager游戏|适用于iPhone的cocos2dBox2D 论坛box2d用户手册Box2D 论坛iPhone. iOS 开发中心iOS Dev Center - Apple DeveloperIOS开发人员库Foundation框架参考内存管理编程指南:内存管理The Objective-C Programming Language.

苹果iPhone 4s中文官网站点上线

- David - cnBeta.COM
经过短暂的更新后(这次没有离线仅仅是出现了页面错乱),苹果iPhone 4s站点已经上线. 在发布会后我们可以从这里进一步了解到有关iPhone 4s的最新信息.

使用Chrome浏览器查看淘宝的IPhone版网站

- Pei - ITeye论坛最新讨论
      用IPhone手机访问http://m.taobao.com ,淘宝的设计已经达到了和APP相媲美的地步. 多次想查看其源码学习,单无奈用PC浏览器访问该网址,出现的是一个比较简化的wap2.0版本的. 经过若干的夜晚的冥思苦想,终于想出了解决方案.       1.IPhone和Android的浏览器都是基于webkit的,和Google Chrome的内核是一样的.

20个优秀的移动(iPhone)网站设计案例

- - 可咔酷 | 网络杂货铺
随着移动互联网的高速发展,越来越多的网站和Web应用程序提供了移动版本. 移动网站的设计不仅仅是考虑屏幕尺寸问题,创意也非常重要. 因此,今天这篇文章我为大家收集了20个优秀的移动(iPhone)网站设计案例,希望能带给您灵感. 网站需要注重两大方面的设计 (@dedeadmin). 网站需要注重两大方面的设计 | 织梦(Dedecms)管理员之家 (@dedeadmin).

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

- - 我爱水煮鱼
最近在制作 iPad 导航( http://ipaddh.com/),慢慢接触到一些 iPad 网页制作碰到的的特殊问题,接下来几篇文章,我们会一一介绍. 第一个问题就是关于添加网站到 iPad 主屏幕和自定义网站的主屏幕图标. 添加网站到 iPad 主屏幕. 我们知道在 iPad 使用 Safari 浏览网站的时候,如果喜欢某个网站(比如我们刚做的 iPad 导航 http://ipaddh.com/),除了可以把该网站添加到书签以及 Email 给好友之外,还可以把这个网站添加到主屏幕,使得该网站类似于一个 iPad 的 App 应用程序,下次打开就直接点击该图标而不需要重新输入网址.

45个iPhone程序绝美网站 启动你的设计灵感

- littlepush - i迷
如果您是美工大师, 可以来撇撇嘴.. 如果您是程序员, 只能来”哇嗷!” 感慨自己为啥遇不上让自己代码发光的UI设计师. 如果您是拿来主义者, 哼哼, 等什么呢 ~~~. 原文地址 http://bbs.weiphone.com/read-htm-tid-1559170.html. 2010/08/12 -- UniT for iPhone (1.0.9 正式版已经通过AppStore审察,9月21日更新).

经典网页设计:精心设计的 iPhone 和 Android 应用程序网站

- - 博客园_梦想天空
  这篇文章和大家分享一组精心设计的 iPhone 和 Android 应用程序网站. 在一个应用程序的网站,从醒目的图像到有趣的标题和产品信息等等,你可以找到很多的灵感. 今天的文章中收集的这些设计精美的应用程序网站为我们的网站设计和制作提供了各种各样的思路,都是真正优秀和杰出的设计,值得借鉴和学习.

iPhone for Steve: 不是iPhone 4S,iPhone 5才是?

- ArmadilloCommander - 老人與蘋果
  蘋果在10月4日發表iPhone 4S,讓世界蘋果迷大失所望. 但是蘋果的文化就是Think Different. 第二天Steve Jobs突然過世,更是讓大家想像力Think Different,4S成為“for Steve”,好像大家都在玩文字遊戲,在老人來看實也算是奇觀.   Steve Jobs過世,使台灣的所謂蘋果專家一下子增加上千百人,各個都在電視報章發表蘋果大論,也真算是奇蹟.