文档章节

JavaScript为iphone添加到主屏幕

adbug
 adbug
发布于 2015/11/30 10:32
字数 658
阅读 170
收藏 1

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

JavaScript为iphone添加到主屏幕

设定主屏幕图标

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, 系统将按以下顺序搜寻图标:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

为用户加上提示

通过添加一个JavaScript代码来邀请用户添加到主屏幕,该库使用了HTML5的本地存储跟踪是否已经显示过了,以避免重复出现。

目前使用比较多和有在更新的一个库来自这里:http://cubiq.org/add-to-home-screen

它可以在Safari或者Chrome移动版中出现如下的提示消息(有不同语言,中文等)

JavaScript为iphone添加到主屏幕

下载和演示

下载   演示

示例代码:

<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

© 著作权归作者所有

共有 人打赏支持
adbug
粉丝 6
博文 176
码字总数 198249
作品 0
成都
私信 提问
『前端干货篇』: 你不知道的Event Loop

一星期的满课,身心疲惫(×_×)...周末闲下来,仔细研究了下JS的事件轮询机制,看了看阮一峰大大的相关文章,真的收货挺多。 从一道面试题说起 相信这道题很多人都看过,结果是先输出,再输出...

酱菜豪
10/30
0
0
精读 The Cost of JavaScript

精读 The Cost of JavaScript 36 人 如今,JavaScript 仍然是我们向移动终端分发页面时成本最高的资源,因为它可以在很大程度上延迟页面的交互性。一个页面在开发时都要考虑哪些问题,用户实...

hijiangtao
08/05
0
0
[译]从内部了解现代浏览器(3)

原文,Mariko Kosaka [译]从内部了解现代浏览器(1) [译]从内部了解现代浏览器(2) [译]从内部了解现代浏览器(3) 渲染器进程的内部工作原理 这是本系列文章的的第3部分。 在前2篇,我们介绍了多...

biorz
10/09
0
0
Building JavaScript Games for Phones Tablets and Desktop(7)- 基本的游戏对象

基本的游戏对象 在这章,开始对Painter游戏的源代码进一步的整理组织。这非常有必要,因为源代码里面有很多行代码。在上章里,我们把变量组合到了对象里面。这章里,会使用到更多的对象并且把...

NightCode
2015/04/13
0
0
[译] 现代浏览器内部揭秘(第三部分)

原文地址:Inside look at modern web browser (part 3) 原文作者:Mariko Kosaka 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:ssshooter 校对者:ThomasWhyne, ...

ssshooter
10/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows 10 设置 Java 环境变量

首先你需要在我的电脑中打开,找到环境变量属性。 找到环境变量属性 找到环境变量属性后单击将会看到下面的设置界面。 在这个界面中设置高级系统设置。 环境变量 在弹出的界面中选择设置环境...

honeymose
今天
1
0
用any-loader封装jQuery的XHR —— 随便写着玩系列

哎,都说没人用JQuery啦,叫你别写这个。 其实我也是好高骛远使用过npm上某个和某个很出名的XHR库,嗯,认识我的人都知道我喜欢喷JQ,以前天天喷,见面第一句,你还用JQ,赶紧丢了吧。但我也...

曾建凯
今天
5
0
聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
今天
4
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
5
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部