IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕

在 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">

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

时间： 2024-10-28 16:29:04

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

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

现在我们要使用手机上某个应用时,通过点击屏幕上的图标就可以运行.但是对基于HTML的Web应用来说,运行起来就比较麻烦了,用户必须先打开浏览器,然后访问想使用的应用程序站点.现在我们想把一个指定的Web应用绑定到界面上的一个图标,用户通过点击界面上的图标就可以启动对应的Web应用了. 但是不同浏览器对于触碰图标的反应是不一致的.在这里,我们将探索不同浏览器对于点击图标启动的不同反应,从而使点击图标启动Web应用的特性能够覆盖到更多的浏览器.   下载源代码例子(http://pan.baidu.

如何启动app时全屏显示Default.png（图片）？

大部分app在启动过程中全屏显示一张背景图片,比如新浪微博会显示这张: 要想在iOS中实现这种效果,毫无压力,非常地简单,把需要全屏显示的图片命名为Default.png即可,在iOS app启动时默认会去加载并全屏显示Default.png. 也可以用其他名称来命名图片,在Info.plist配置一下即可: 配置过后,app启动时就会去加载并全屏显示lufy.png 在默认情况下,app显示Default.png时并非真正的"全屏显示",因为顶部的状态栏并没有被隐藏,比如下面的效果:

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

iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图: <!-- Safari浏览器[添加到书签] --> <link rel="shortcut icon" href="static/my/img/favicon.ico"> <!-- Safari浏览器[添加到主屏幕] --> <link rel="apple-touch-icon" href="stat

启动app时全屏显示Default.png (附效果图)

效果图: 要想在iOS中实现这种效果,毫无压力,非常地简单,把需要全屏显示的图片命名为Default.png即可,在iOS app启动时默认会去加载并全屏显示Default.png. 也可以用其他名称来命名图片,在Info.plist配置一下即可: 配置过后,app启动时就会去加载并全屏显示lufy.png 在默认情况下,app显示Default.png时并非真正的"全屏显示",因为顶部的状态栏并没有被隐藏,比如下面的效果: 大部分情况下,我们都想隐藏状态栏,让Default.png真

网页程序开机启动并自动全屏

网页触摸屏程序的开机自动全屏方法: 开机启动,直接建立一个网页的快捷方式,丢到开机启动文件夹中即可. 主要是如何自动全屏,在网上发现一个十分实用且简单的方法: 以chrome浏览器为例,我们在建立快捷方式时,路劲填写如下即可: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk C:\Users\你的计算机用户名\Desktop\你的网页名.html 前面为你浏览器的路劲,中间为全屏参数,后面为你的

虚拟桌面启动后自动全屏

如果客户端有多个显示器,打开虚拟桌面后,如果需要进入到全屏模式(覆盖所有的客户端显示器),目前还是需要一定技巧的,需要把桌面拖放到两个屏幕的中间,然后全屏才可以实现.否则,简单的全屏只会覆盖当前所在的屏幕.这对普通用户来说,使用有一定的要求,所以,我们可以通过简单的调整,让虚拟桌面在启动后,自动进入到全屏状态,免去了手动全屏的操作. 我们可以通过以下几种方式来实现: 修改ICA文件:针对所有用户生效修改客户端注册表全局设置:对使用客户端用户的所有桌面生效修改特定桌面组的注册表设置:只对特定桌面组

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

最近做项目遇到要求截取图片长度超出手机屏幕,即可滑动的长图截屏,这里简单说一下解决思路,下面附带Demo下载地址. ,当我们要截全屏时,将滑动视图的frame以及偏移量记录下来,然后将滑动视图偏移量设为0,frame改为滑动视图的 contentSize,然后生成图片进行保存,代码实现如下: // 下面方法,第一个参数表示区域大小.第二个参数表示是否是非透明的.如果需要显示半透明效果,需要传NO,否则传YES.第三个参数就是屏幕密度了,调整清晰度. UIGraphicsBeginImageCon

ios 让播放视频的 时候能够全屏 目前已经测试很多 可以

- (NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { if ([NSStringFromClass([[[window subviews]lastObject] class]) isEqualToString:@"UITransitionView"]) { return UIInterfaceOrientati

手机web网页全屏显示

1.设置百分比显示而且是自适应. 2.  meta标签设置 ios:正确设置 <meta name="viewport" content="width=device-width;" /> :错误设置 <meta name="viewport" content="width=device-width" /> 显示如下效果图 分析原因:少了一个分号; Android:正确设置 <meta name=&