请注意！！！使用了【全屏模式之后】。页面的顶部会空出一大块。而且这并不属于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. python基础之dict和set

    dict dict是dictionary的缩写,python内置了字典,在其他语言中也称为map,使用键值对储存,具有极快的查找速度. 如果是只用list来实现,就需要两个list,先在第一个list ...

  2. [转]MySQL与Oracle的语法区别详细对比

    Oracle和mysql的一些简单命令对比 1) SQL> select to_char(sysdate,'yyyy-mm-dd') from dual; SQL> select to_c ...

  3. HDU 4578 Transformation （线段树）

    Transformation Time Limit: 15000/8000 MS (Java/Others)    Memory Limit: 65535/65536 K (Java/Others)T ...

  4. UTF8

    Here's a couple of functions (based on Brian Bondy's example) that use WideCharToMultiByte and Multi ...

  5. 改变element-ui滚动条设置，

    基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用 在项目中,总是需要用到滚动条,但windows浏览器默认的滚动条是很丑的,为了页面美观,可以考虑优化滚动条样式.  vu ...

  6. SQL Server 获取某时间点后修改的函数Function 并以文本格式显示

    修改查询分析器如下选项 右键=>查询选项 =>结果=>文本=> 取消 在结果集中包括列标题 的勾选 右键=>将结果保存到=> 选择 以文本格式显示结果 执行如下SQ ...

  7. Android 将ARGB图片转换为灰度图

    思路如下: 1.读取or照相,得到一张ARGB图片. 2.转化为bitmap类,并对其数据做如下操作: A通道保持不变,然后逐像素计算:X = 0.3×R+0.59×G+0.11×B,并使这个像素的值 ...

  8. STL容器简介

    stl不是面向对象的编程,而是一种不同的编程模式————泛型编程 我们常用到的STL容器有vector.list.deque.map.multimap.set.multiset 顺序性容器:vecto ...

  9. mysql多实例介绍及配置

    mysql多实例介绍及配置 1.mysql多实例介绍 1.1 什么是mysql多实例 mysql多实例就是在一台机器上开启多个不同的服务端口(如:3306,3307),运行多个MySQL服务进程,通过 ...

  10. [Angular] Angular i18n Alternative Expressions Support (select)

    For example we have those code: <div class="course-category" [ngSwitch]="course.ca ...