后PC时代换个方式存书签

以下是写给各位博友的文章

↓ ↓ ↓ ↓ ↓

自从买了iPad之后,发现越来越多的用手持设备刷围脖、上论坛、看网页了。

传统的书签木有足够的魅力让人把你的地址写在最显目的地方。换种方式存书签也许更好~

首先用你的iOS设备打开下面的网页,然后点击分享按钮→添加到桌面图标

这些网页都不是显示的网页缩略图哦!而是真真实实的图标。文字一样的存储条目已经不能引起你的兴趣了,图形能提高是别的力度。看看iOS6的分享按钮你就知道咯~那么这样的图标要怎么去做呢?下面跟我一起来看看吧~

【这基本使用到了Web App的一些内容,因此查阅了苹果官方对Safari Web App的相关资料】

1、图标

众所周知,苹果的设备比较多,总的算下来,图标基本需要做以下几种:

144²pxiPad3

114²pxiPhone4/4S/5、iPod touch4/5

  72²pxiPad2/1

  57²pxiPhone(非Retina)

注意:制作的时候不需要做圆角,苹果会自动添加圆角。铺满即可。如果你觉得很麻烦,只一个也可以,但缩放的结果往往是不清晰哦~

接下来Safari的开发文章中有提到要在Header位置添加一段代码,但事实上我在iOS6中测试的时候不需要添加代码也可以实现。所以这段代码我就不贴上来了,感兴趣的可以在[这里]查阅到

将图标按照下面的方式命名,中间144×144的位置改为图片大小,上传到WP博客或网站的根目录即可。iOS设备会自动根据设备情况选择正确的图标:

apple-touch-icon-144×144-precomposed.png

注意144×144中间的是英文字符:x,而不是乘号。

如果偷懒只做了一个图标,那么直接写为“apple-touch-icon-precomposed.png”就行了。中间的数字可以不标注。各种设备会自动缩放。

-precomposed:指的是已经经过了高光的处理,不需要iOS自动添加高光了。建议不要去掉这一部分。

2、图标名称

这里实际上是html的<title>标签。对于Wordpress来说,可以修改后台的“设置→常规→站点标题”。这样就可以实现了

 

以上只是换了一个图标,打开的时候依然是使用的Safari,对于WebApp,还可以隐藏地址栏等等。就像mail.qq.com登陆后添加的图标一样,完全成为了一个App的样子。不过这属于Web App开发的范围了,一般网页也用不到,感兴趣的话可以参考前面提到的Safari开发文档。

现在,赶紧动手试试吧~

发表评论?

7 条评论。

  1. 你这个ICON太亮了.

  2. 提问:有没有办法自己给那些没有icon的网站添加图标?

    • 这个……好像不行……竟然威锋网站都木有这种图标,太纠结了……

  3. 吉克隽逸没有能够笑到最后,作为导师很不爽吧? /呲牙

  4. 以上表情禁止转载或挪作它用,谢谢合作.

    做qq表情不错。