html5怎样生成桌面图标

html-css043

html5怎样生成桌面图标,第1张

HTML5是没有这个功能的,可以使用浏览器的内置发送到桌面图标功能,以下以UC为例:

1、进入UC浏览器首页后,点击所示的图标

2、会看到【书签/历史】点击它

3、进入书签后,随后长按几秒你想发送到手机桌面的书签网址

4、接着会弹出后台打开、删除书签、编辑书签、加入导航、发送至桌面五个操作按钮,点击【发送至桌面】出现添加桌面书签,点击【确定】

5、发送桌面成功,退出后就可以看到书签在手机桌面上。随时想看就看,很方便的哦

虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的。

既然是在iOS中的Safari折腾的,那么代码中利用到的也基本上都是Safari的私有属性。

添加图标到主屏幕是Web App的第一步:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png">

添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed,区别就在于是否会应用iOS中自动给图标添加的那层高光。

由于iPhone以及iPad都有两种分辨率的设备存在,图标的尺寸就需要做4个:144×144(iPad Retina)、72×72(iPad)、114×114(iPhone Retina)、57×57(iPhone)。

可以使用sizes尺寸来告诉设备该调用哪个图标。