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

最近在制作 iPad 导航http://ipaddh.com/),慢慢接触到一些 iPad 网页制作碰到的的特殊问题,接下来几篇文章,我们会一一介绍。希望你能喜欢 🙂 。第一个问题就是关于添加网站到 iPad 主屏幕和自定义网站的主屏幕图标。

添加网站到 iPad 主屏幕

我们知道在 iPad 使用 Safari 浏览网站的时候,如果喜欢某个网站(比如我们刚做的 iPad 导航 http://ipaddh.com/),除了可以把该网站添加到书签以及 Email 给好友之外,还可以把这个网站添加到主屏幕,使得该网站类似于一个 iPad 的 App 应用程序,下次打开就直接点击该图标而不需要重新输入网址。

添加网站到 iPad 主屏幕
添加网站到 iPad 主屏幕

iPad 的主屏幕 Webclip 图标功能

但是如果该网站没有做任何设置,添加到 iPad 主屏幕显示的是 iPad 自动将页面截屏并缩放到相应尺寸生成的图标,这样对于用户来说不是那么显著,其实 iPad 有个叫做 Homescreen Webclip 功能,它可以让你定义显示添加到 iPad 主屏幕的图标。

如何给网站创建 iPad Webclip 图标

因为 iPad 会自动给图标添加一些视觉效果,如圆角、阴影和玻璃反光效果,为了保证你的图标可以利用这些视觉效果,应该制作一个 72X72 像素,90度直接无任何发亮或光泽的的 PNG 格式的图标(如果图片不符合标准尺寸, iPad 会自动按比例调整)。

然后在你的网站的 head 通过以下代码调用这个图标。


<link rel="apple-touch-icon-precomposed" href="http://ipaddh.com/wp-content/themes/ipaddh/logo.png" >

当然如果你将该 PNG 图片命名为 apple-touch-icon.png 放在根目录下,不需要任何语句,iPad 也会直接调用该图标。

最后的效果如下图,当然欢迎你使用 iPad 访问 iPad 导航http://ipaddh.com/),你可以通过添加iPad 导航到主屏幕来测试该功能 :-)

iPad 导航的 Webclip 最终效果
iPad 导航的 Webclip 最终效果

标签:

热门文章