JavaScript为iphone添加到主屏幕

时间 2019-11-09

标签 javascript iphone 添加屏幕栏目 JavaScript 繁體版

原文原文链接

iphone手机有一个书签栏上能够将当前在浏览的网页添加到主屏幕，用户添加该选项以后，就能够从桌面上启动这个web程序，让人看起来有点像web app同样，深受许多人的喜好。可是不少人殊不知道或者懒得去设置，本文将介绍一个javascript提示用户添加到主屏幕。 javascript

设定主屏幕图标

ios 的网页图标与传统的网页 favicon 类似, 处理方式也差很少, 下面会为你介绍几种处理方式. css

放置在默认位置 html

建立一个 PNG 图片, 命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png, 放置在网站根目录便可. html5

指定图标路径 java

为页面指定一个图标路径, 在网页的 head 部分代码以下: ios

<link rel="apple-touch-icon" href="/custom_icon.png"/>

为不一样设备指定图标 git

在网页中为不一样的设备指定特殊图标, 由于 iPhone 和 iPad 的图标尺寸不同, 须要 sizes 属性来进行区分, 若是没有定义 sizes 属性, 默认 sizes 是 57 x 57. 代码以下: github

<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" />

若是没有图片尺寸能够匹配设备图标的尺寸, 存在比设备图标大的图片, 将使用比设备图标尺寸略大的图片; 若是没有比设备图标大的图片, 则使用最大的图片. web

若是没有在网页中指定图标路径, 将会在根目录搜寻以 apple-touch-icon... 和 apple-touch-icon-precomposed... 做为前缀的 PNG 图片. 假设如今有一个设备的图标大小是 57 x 57, 系统将按如下顺序搜寻图标: app

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