文档章节

JavaScript为iphone添加到主屏幕

adbug
 adbug
发布于 2015/11/30 10:32
字数 658
阅读 115
收藏 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
成都
Building JavaScript Games for Phones Tablets and Desktop(7)- 基本的游戏对象

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

NightCode
2015/04/13
0
0
精读 The Cost of JavaScript

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

hijiangtao
08/05
0
0
iphone6&iphone6 plus

下面开始讨论iPhone6/iPhone6 Plus的设备屏宽,这里说的设备屏幕宽度专指设备物理显示尺寸(device-width),我们知道苹果从iPhone4开始引进了Retina屏幕,一个CSS像素可以表示多个物理像素(...

果树啊
2015/06/03
0
0
高性能移动Web High Performance Mobile Web - 待更新迁移

移动Web简介 移动产品列表 •基于电视的设备,包括:智能电视,游戏机(如Xbox)和机顶盒(如Chromecast,亚马逊火 Fire TV等) •桌面设备,包括使用笔记本电脑的操作系统,如Windows,Mac...

磁针石
2015/08/18
0
0
优化 JavaScript 执行[转]

JavaScript 经常会触发视觉变化。有时是直接通过样式操作,有时是会产生视觉变化的计算,例如搜索数据或将其排序。时机不当或长时间运行的 JavaScript 可能是导致性能问题的常见原因。您应当...

行列
07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
23分钟前
0
0
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
42分钟前
0
0
c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
4
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
2
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部