ios safari 添加图标

来源:互联网 发布:linux 打印当前路径 编辑:程序博客网 时间:2024/05/22 23:02

持有ios设备的童鞋应该都用过Safari,也许你会觉得他不如UC好用,但是你决不能忽略它的强大,在Wi-Fi下Safari确实十分给力。每一个web app的开发者更无法忽略这个浏览器,在Safari上可以实现好多令人兴奋的功能,那感觉,作为开发者的你一定懂得。

这里向大家介绍一下如何更方便的使用Safari浏览你喜欢的网站,前提是这个网站已经为ios制作了主屏幕图标哟~

也许你会发现你的同事在使在ios时点击桌面的一个图标就会全屏打开一个网站,就是下图这种主屏幕图标

iphone 图标

这种图标看起来很像一个native的应用程序,实际上它只是一个网站的快捷入口,这也是我下面要说的如何让网站支持这种图标的添加。

下面是代码,很简单的一段:

ios会自己把图片裁切成圆弧状,并且添加弧形高亮的效果,所以你只需要给出一张普通的四方图片就可以,剩下的事情ios会帮你处理。

当第一次打开主屏幕添加的这个图标会全屏展示网站,如下图(如何制作for ios版本wordpress请看为你的博客打造iphone版本)

这样可以更好的展示你所添加的网站,也可以更精确的测试出满屏的第一屏的位置。

你可能会说这个功能可能会用很多人不知道,没问题,下面就来解决这个问题

引入这个css和js之后就会出现下图的提示,如果你要使用的话建议保存到自己的空间下引用,毕竟这个使用的国外的地址,速度上肯定不理想。

到这里就实现了网站for ios版本添加到主屏幕图标的问题,你也可以自己试一下,祝你好运哦。

0 0
原创粉丝点击