请注意！！！使用了【全屏模式之后】。页面的顶部会空出一大块。而且这并不属于margin,padding，或者定位。就是单纯的空出来非常难调试。其实坑就是这里

在 iPhone「添加到主屏幕」时显示自定义图标

测试资源下载：https://github.com/dragon8github/mobile-boilerplate/tree/master/img/touch

<!doctype html>

<html>

  <head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->

        <link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">

        <!-- iPad 3+ (with @2× display) iOS ≥ 7 -->

        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">

        <!-- iPad (with @2× display) iOS ≤ 6 -->

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

        <!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->

        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">

        <!-- iPhone (with @2× display) iOS ≤ 6 -->

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

        <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->

        <link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">

        <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->

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

        <!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->

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

        <!-- Fallback for everything else -->

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

        <!-- IOS 主屏幕应用全屏 -->

        <meta name="apple-mobile-web-app-capable" content="yes">

        <!-- 安卓 主屏幕应用全屏 -->

        <meta name="mobile-web-app-capable" content="yes">　　　　　

　　　　　　<!-- IOS默認的時間、電池、供應商等信息 -->
　　　　　　<meta name="apple-mobile-web-app-status-bar-style" content="black" />

  </head>

  <body>

  </body>

</html>

效果演示（Safari浏览器才支持【添加到主屏幕】，坑爹的UC浏览器不支持）：

在桌面显示的是自定义的ICO图标

由于加入了<meta name="apple-mobile-web-app-capable" content="yes">

所以通过桌面启动的网站是全屏显示的（隐藏了浏览器的地址栏和工具栏，加载状态栏等）

IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕的更多相关文章

  1. HTML5移动Web开发（七）——通过界面图标启动Web应用

    现在我们要使用手机上某个应用时,通过点击屏幕上的图标就可以运行.但是对基于HTML的Web应用来说,运行起来就比较麻烦了,用户必须先打开浏览器,然后访问想使用的应用程序站点.现在我们想把一个指定的We ...

  2. 关于在Safari浏览器中将网页添加到主屏幕的相关设置（自定义图标，启动动画，自定义名称）

    在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像native那样 第一步: 第二步: 第三步: 到这里还没结束:我们还要进行相关设置才能使我们的应用更像原生 ...

  3. iOS 全局禁止横屏，但UIWebView 全屏播放视频，横屏，解决办法(任意页面横竖屏或禁止)

    iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法 时间 2015-07-14 20:59:00  博客园-原创精华区 原文  http://www.cnblogs.com/fe ...

  4. iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图

    iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图: <!-- Safari浏览器[添加到书签] --> <link rel="sh ...

  5. 启动app时全屏显示Default.png

    一直很喜欢MJ的讲课视频,今天看了他的博客学到了些东西顺便记录下来. 在默认情况下,app显示Default.png时并非真正的"全屏显示",因为顶部的状态栏并没有被隐藏,比如下面 ...

  6. DevExpress启动时的全屏SplashScreen

    使用DevExpress启动时弹出"正在加载"的Logo,而且是全屏,这种感觉不太好. 原因是使用了DocmentManager控件,当DocmentManager初始化如果耗时较 ...

  7. 【Android 界面效果13】关于全屏和取消标题栏

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 去掉标题栏: 第一种:也一般入门的时候经常使用的一种方法 requestWindowFeature(Wi ...

  8. ios开发之滑动长图截全屏应用

    最近做项目遇到要求截取图片长度超出手机屏幕,即可滑动的长图截屏,这里简单说一下解决思路,下面附带Demo下载地址. ,当我们要截全屏时,将滑动视图的frame以及偏移量记录下来,然后将滑动视图偏移量设 ...

  9. 安卓全屏状态下键盘充满屏幕留不出ui控件的解决办法附edittext和键盘的属性

    1.我们先看看常用和不常用的属性值(Edittext) android:inputType参数类型说明 android:inputType="none"--输入普通字符 andro ...

随机推荐

  1. [转]Java常用概念解答

    1. 事务是什么? 事务是作为一个逻辑单元执行的一系列操作,一个逻辑工作单元必须有四个属性,称为 ACID(原子性. 一致性.隔离性和持久性)属性,只有这样才能成为一个事务: 原子性 事务必须是原子工 ...

  2. Android——多线程之Handler

    Why? 因为在Android系统中UI操作并不是线程安全的,如果多个线程并发的去操作同一个组件,可能导致线程安全问题.为了解决这一个问题, android制定了一条规则:只允许UI线程来修改UI组件 ...

  3. 使用hosts.allow和hosts.deny实现简单的防火墙

    说明:我建议学习防火墙只单一学习一种就够了,这种方式虽然简单和快速,但也有些不太灵活,所以如果要深入防火墙建议转iptables  一.背景简介 在Linux上多用iptables来限制ssh和tel ...

  4. 如何释放 DB_RECOVERY_FILE_DEST_SIZE

    转自原文 如何釋放 DB_RECOVERY_FILE_DEST_SIZE,有删减 oracle默認安裝之後,如何沒有手動設置歸檔路徑(alter system set log_archive_dest ...

  5. iOS:多线程同步加锁的简单介绍

    多线程同步加锁主要方式有3种:NSLock(普通锁).NSCondition(状态锁).synchronized同步代码块 还有少用的NSRecursiveLock(递归锁).NSConditionL ...

  6. jquery点击li标签之后在该li标签上添加一个class，点击下一个li时删除上一个li的class

    思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...

  7. 怎样在Ubuntu手机应用中得到全部的环境变量值

    我们在先前的例程中已经通过一些方法得到我们应用的一些环境变量值.这些值有的很实用.比方我们能够得到我们应用所仅仅能訪问的文件夹.在今天的例程中,我们来展示一种方法能够得到应用全部的环境变量.在我们的实 ...

  8. centos 5.4中mysql主从同步配置方法

    安装环境•centos 5.4•mysql 5.1.xx 采用rpm直接安装•xtrabackup 1.2.22 采用rpm直接安装1. Master:/etc/my.cnf  代码如下 复制代码 [ ...

  9. （转）nio 字符集

    字符集 概述 根据 Sun 的文档,一个 Charset 是“十六位 Unicode 字符序列与字节序列之间的一个命名的映射”.实际上,一个 Charset 允许您以尽可能最具可移植性的方式读写字符序 ...

  10. 使用LNMP常见问题解答

    使用LNMP常见问题解答 一.LNMP的安装过程详解,注:绿色文字为注释,实际使用过程中没有. ##先要下载,并根据不同系统进行安装: wget -c http://soft.vpser.net/ln ...