请注意！！！使用了【全屏模式之后】。页面的顶部会空出一大块。而且这并不属于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. （Mark）Myeclipse10.6 下怎么安装Jad插件

    Jad是java的反编译工具,是命令行执行,反编译出来的源文件可读性较高.可惜用起来不太方便.还好找到eclipse下的插件,叫jadclipse,安装好之后,只要双击.class文件,就能直接看源文 ...

  2. iOS笔记,得到一个控件的坐标

    [showBtn.superView  convertRect:showBtn.frame toView:nil]: 参数从后往前理解: toView-->指的目标控件的坐标需要在哪个view上 ...

  3. 添加HP消息队列

    Date: 20140210 Auth: Jin 两台服务器 120 HTTPSQS 236 HTTPPROXY 1.add host $ jump 120 #vim /etc/hosts 192.1 ...

  4. 实现自动解析properties文件并装配到Bean

    主要实现了,配置的属性就装配, 没有配置的属性不装配 思路: 1 . 通过反射获取类内部所有方法名称 2 . 获取perperties 的key集合 3 .  处理字符串,比较两个匹配,如果匹配成功就 ...

  5. Windows命令行的使用

    在介绍Windows批处命令前,我们首先来介绍Windows命令行的使用. Windows shell提供了一个黑色的框框界面,即命令行操作界面,关于命令行的作用和好处,我就不费口舌了,下面仅窥见一斑 ...

  6. RawCap抓取本地回环接口数据包

    RawCap.exe --help ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 D: ...

  7. 一步一步学RenderMonkey(4)--点光源光照模型 【转】

    转载请注明出处:http://blog.csdn.net/tianhai110 点光源光照模型: 公式: I = Icolor*attenuation;                        ...

  8. 这里先发布一个，自己写得unityUI的适配的方案（插播）

    这个适配是依据坐标系的象限的思想来进项适配的.參考了部分的NGUI的适配方案. 在程序的事实上,来測量UI距离相机边界的像素然后依据比例来进行适配,个人认为还不错. 放码! . 有个前提哦就是你要先定 ...

  9. ckeditor 绑定事件

    CKEDITOR.instances["Content"].on("instanceReady", function () { //set keyup even ...

  10. windows下流媒体nginx-rmtp-module服务器搭建及java程序调用fmpeg将rtsp转rtmp直播流【转】

    https://github.com/illuspas/nginx-rtmp-win32 http://bashell.sinaapp.com/archives/build-nginx-rtmp-mo ...