为webapp应用制定IOS,Android桌面快捷图标 – 千丝海阁

首页 » HTML/CSS » 为webapp应用制定IOS,Android桌面快捷图标

为webapp应用制定IOS,Android桌面快捷图标

6903 7

在天地团上线之后,tiandi就为这个webapp应用制作了属于自己的快捷图标。当时是根据IOS的桌面快捷图标方式制作的,但是没想到在Android上安装了Chrome for Android,这个设定竟然也同样有效果。

制作方式比较简单,即在webapp的页面head中插入以下代码:

<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-iphone-retina.png" /> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" /> 

可以看到,针对不同分辨率的设备将会引用不同的png文件,此处png则为桌面快捷图标文件。上传文件到服务器上,用Safari或者Chrome打开网站,按菜单中的添加到主屏幕即可,这里截图都是android的。

制定快捷桌面工具

效果如下,返回手机首页,就能发现自己的webapp的图标了,点击后自动打开webapp,实际上就是打开浏览器后跳转到固定网站的功能。

制定桌面快捷工具

说到最后,tiandi想说其实wordpress构建的网站也算是一种webapp,你也可以用本文的方法创建一个自己网站的快捷桌面图标。

文章评分7次,平均分4.9



上一篇:Chrome android关于getCurrentPosition的参数positionOptions错误表现
下一篇:win7安装adobe reader出现映射到用户文件夹的驱动器无效的解决办法

本文原始地址:http://www.tiandiyoyo.com/2014/05/webapp_shortcut_for_ios_or_android/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

    没有相关的文章

评论前先开启评论开关:


7 Comments

  1. Alex :

    我也刚好弄了一个,感觉非常好哦。

  2. mooc :

    rel=”apple-touch-icon” 为什么安卓能用。。

  3. FROYO :

    tiandi要搞安卓啦

  4. webapp现在确实是越来越广泛了

载入分页评论...
//