如何为 iPhone 制作 WebClip 图标

小编辑 发布于 2011/07/21 19:05
阅读 4K+
收藏 2
Webclip 图标是一种 Apple 独有的用来在运行 iOS 的设备的主屏幕上显示应用程序和书签的图标。想要为你的网站添加一个 webclip 图标的话,需要创建一个尺寸适当的方形图片。

自从 iPhone 4 的高分辨率屏幕出现后, webclip 图标的尺寸也变大了。最早的 webclip 图标只有 57×57 像素,但现在却是 114×114 像素 72 dpi。以下是创建的步骤:
1. 打开 Photoshop 或者你擅用的图片编辑软件;
2. 新建一个 114×114 像素 72 dpi 的画布;
3. 设计…;
4. 存成 PSD 以便将来再改;
5. 存为 PNG 并且命名为 apple-touch-icon.png;
6. 上传到网站的根目录;

你不必做成有高光效果的圆角图片,因为 iOS 会自动做这件事。所以使用方形图片即可。

如果你没有访问网站根目录的权限,将刚刚保存的文件放到任何一个地方都行,只是需要将下面的元标记(meta tag)添加在每个需要这个图标的页面的之间。

<link rel="apple-touch-icon" href="path/to/the/apple-touch-icon.png">

你还可以通过上述元标记(meta tag)为不同的页面甚至不同的设备指定不同的图标。

刚才提到最初的 iPhone,iPhone 3G 和 iPhone 3Gs 的 webclip 图标大小是 57×57 像素,iPad 是 72×72 像素。最简单的满足这些设备的方式是制作一个 114×114 像素的图标—— iOS 会自动为其它设备缩小图标的尺寸。

或者,你还可以写一个脚本通过检测访问者的设备类型来显示针对性的图标。例如,Twitter 就是这样做的。它的 webclip 图标是通过这样的 URLs 获取的 http://mobile.twitter.com/bookmark_icon?size=iphone,改变 size 的值例如“ipad”就可以获得不同的图标。

原文来自: http://www.zhxl.me/896.html

加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部