请注意！！！使用了【全屏模式之后】。页面的顶部会空出一大块。而且这并不属于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. Scala 匿名函数

    Scala 中定义匿名函数的语法很简单,箭头左边是参数列表,右边是函数体. 使用匿名函数后,我们的代码变得更简洁了. 下面的表达式就定义了一个接受一个Int类型输入参数的匿名函数: var inc = ...

  2. 移动应用安全开发指南（Android）--数据存储

    1.数据存储 概述 移动应用经常需要在某些场景下(比如用户登录)处理和用户或业务相关的敏感数据,有时候为满足某些业务需求,需要把这些敏感数据存储在本地,如果不对这些数据进行适当处理,就有可能存在敏感信 ...

  3. NHibernate之一级缓存(第十篇)

    NHibernate的一级缓存,名词好像很牛B,很难.实际上就是ISession缓存.存储在ISession的运行周期内.而二级缓存则存储在ISessionFactory内. 一.ISession一级 ...

  4. ORADEBUG DOC 12.1.0.2

     https://berxblog.blogspot.com/2015/01/oradebug-doc-12102.html   this is just an online docu of ORAD ...

  5. Word中设置三栏式表格

    一般期刊要求三栏式表格,我原来是选中表格,用橡皮差擦去不必要的线,但是今天发现只能查去横线,竖线一插曲格式就乱了,我想起了上图,不选“内部竖框线”就好了.

  6. Linux 下的图形库介绍

    在进行Linux下的图形系统编程时,我们常常会遇到以下这些概念: Framebuffer, X11, SDL,DFB, miniGUI, OpenGL,QT, GTK,KDE, GNOME等等. 一. ...

  7. .net 4.5如何使用Async和Await进行异步编程

    通过使用异步编程,可避免出现性能瓶颈,并提高应用程序的整体响应.然而,技术编写异步应用程序的传统方法过于复杂,这使得异步程序难以编写,调试和维护. Visual Studio2012引入了一个简单的开 ...

  8. python 文件和路径操作函数小结

    1: os.listdir(path) //path为目录 功能相当于在path目录下执行dir命令,返回为list类型 print os.listdir('..') 2: os.path.walk( ...

  9. ISP图像调试工程师——自动白平衡（熟悉3A算法）

    http://blog.csdn.net/wzwxiaozheng/article/details/40586293 https://wenku.baidu.com/view/24632048767f ...

  10. [OpenCV]实验1.1：图像加载、显示

    实验要求:利用图像库的功能,实现从文件加载图像,并在窗口中进行显示的功能:利用常见的图像文件格式(.jpg;.png;.bmp; .gif)进行测试 实验原理:图片读取到程序中是以Mat结构存储的,在 ...