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

    首先,要知道Composer是什么? Composer是PHP中用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer会帮你 ...

  2. 移动端调试神器（eruda）

    在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种 ...

  3. ER TO SQL语句

    ER TO SQL语句的转换,在数据库设计生命周期的位置如下所示. 一.转换的类别 从ER图转化得到关系数据库中的SQL表,一般可分为3类: 1)转化得到的SQL表与原始实体包含相同信息内容.该类转化 ...

  4. ERDAS遥感图像配准、及其它一些基本处理

    内容中包含 base64string 图片造成字符过多,拒绝显示

  5. node.js+mysql增删查改

    数据库和表: -- -- 数据库: `test` -- -- -------------------------------------------------------- -- -- 表的结构 ` ...

  6. Objective-C]入门 (xcode helloworld程序 创建类

    一:objective-c简介 Objective-C是进行iPhone软件开发的语言 Objective-C语言是C语言的一个扩展集 Objective-C是一种面向对象的语言 大小写敏感 程序语句 ...

  7. 三种常见的部署Kubernetes的方式

    三种常见的部署Kubernetes的方式 嘹亮的小号 Ghostcloud-001工号,资深Docker玩家,分布式系统研发11年. ​关注他   容器技术将应用程序及其依赖关系与操作系统进行分离,不 ...

  8. XSD-学习总结

    1.代码详细分析 <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/X ...

  9. 用 Chrome 扩展实现修改

      用 Chrome 扩展实现修改 ajax 请求的响应 wincss 4 个月前 背景 Fiddler 和 Charles 是常见的 HTTP 调试器,它们会在本地运行一个代理服务器,可以查看浏览器 ...

  10. 过滤xss攻击和sql注入函数

    /**+----------------------------------------------------------* The goal of this function is to be a ...