JavaScript为iphone添加到主屏幕，html5 在手机桌面添加图标
html5 在手机桌面添加图标，iphone手机有一个书签栏上可以将当前在浏览的网页添加到主屏幕，用户添加该选项之后，就可以从桌面上启动这个web程序，让人看起来有点像web app一样，深受许多人的喜爱。但是很多人却不知道或者懒得去设置，本文将介绍一个JavaScript提示用户添加到主屏幕。
设定主屏幕图标
iOS 的网页图标与传统的网页 favicon 相似, 处理方式也差不多, 下面会为你介绍几种处理方式.放置在默认位置创建一个 PNG 图片, 命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png, 放置在网站根目录即可.指定图标路径为页面指定一个图标路径, 在网页的 head 部分代码如下:
<link rel='apple-touch-icon' href='/custom_icon.png'/>为不同设备指定图标在网页中为不同的设备指定特殊图标, 因为 iPhone 和 iPad 的图标尺寸不一样, 需要 sizes 属性来进行区分, 如果没有定义 sizes 属性, 默认 sizes 是 57 x 57. 代码如下:
<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-iphone4.png' />如果没有图片尺寸可以匹配设备图标的尺寸, 存在比设备图标大的图片, 将使用比设备图标尺寸略大的图片; 如果没有比设备图标大的图片, 则使用最大的图片.如果没有在网页中指定图标路径, 将会在根目录搜寻以 apple-touch-icon... 和 apple-touch-icon-precomposed... 作为前缀的 PNG 图片. 假设现在有一个设备的图标大小是 57 x 57, 系统将按以下顺序搜寻图标:
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
为用户加上提示
通过添加一个JavaScript代码来邀请用户添加到主屏幕，该库使用了HTML5的本地存储跟踪是否已经显示过了，以避免重复出现。目前使用比较多和有在更新的一个库来自这里：http://cubiq.org/add-to-home-screen它可以在Safari或者Chrome移动版中出现如下的提示消息（有不同语言，中文等）
下载和演示
<head><title>Add To Home</title>...<link rel='stylesheet' type='text/css' href='../../style/addtohomescreen.css'><script src='../../src/addtohomescreen.js'></script><script>addToHomescreen();</script></head>选项设置：
addToHomescreen({ startDelay: 5 //开始的间隔});addToHomescreen({ skipFirstVisit: true, //首次跳过出现 maxDisplayCount: 1 //最多出现次数});最后，如果你使用jqMobile，你还可以看看另外一个版本：https://github.com/okamototk/jqm-mobile-bookmark-bubble以上两个版本均有这个库的影响：mobile-bookmark-bubble
【JavaScript为iphone添加到主屏幕，html5 在手机桌面添加图标】相关文章：
5.requestAnimationFrame详解以及无线页面优化
点击展开全文