ios全屏模式下避免跳转到safari浏览器，在苹果safari上实现全屏效果（让web页面以独立app的形式运行）

「爱情、让人受尽委屈。」 2023-10-08 21:21 16阅读 0赞

### apple-[mobile][]\-web-app-capable ###

你可能不知道的一个功能：web 单页面应用可以在手机端以类似独立 app 的形式运行。

就像下面这样，

1.  没有上下的工具栏
2.  切换的时候跟普通 app 没什么不同

> 苹果官方对 [safari][]可用 meta 标签的说明 [Safari HTML Reference - Supported Meta Tags][]

只需要添加下面一行即可

<meta name="apple-mobile-web-app-capable" content="yes">
    
    <meta name="mobile-web-app-capable" content="yes">

添加meta标签，打开谷歌浏览器点击添加到主屏幕，重新启动，实现自动全屏（没有底部的地址栏了）。

`apple-mobile-web-app-capable`如果设置`content`为`yes`，应用以全屏模式运行，否则不会在全屏中运行。

同时，也要搭配

`apple-mobile-web-app-status-bar-style`用于定义状态栏文字颜色的，可选值有`default``black-translucent``black`

`black-translucent`为透明，内容滚动的时候，透过状态栏可以看到下面的内容。

`default``black`为不透明，看不到下面的内容。

> default为白色 black为黑色 black-translucent为灰色半透明

如果不放心，就再配合下面这个meta，将顶部状态栏变为白色。

可以参考我的另一篇文章：[《置网页在Safari15浏览器顶部状态栏的颜色》][Safari15]

以上meta只会在你把这个页面添加到主屏幕时才会生效。

> **注意**这个功能需要你的页面是或项目是单页面应用才行，比如 vue 项目。如果是多个 html 页面的项目，在使用的时候很不友好，像这样：（跳转时上面和下面会多出工具栏）

### 添加桌面图标 ###

有了这种功能，我们还需要给独立web页面添加一个在桌面上显示的图标。

<meta name="application-name" content="wubin.work">
     
     <link rel="apple-touch-icon-precomposed" sizes="120x120" href="%PUBLIC_URL%/icon.ico">

> 这里会有一个app图标尺寸问题一般使用120\*120，当然对于不同的设备会用不同的尺寸对应：下面是详细尺寸

![ac6c954650dc33b540fb2b1fac067903.jpeg][]

简单总结下：

还可以配置启动动画

<link href="%PUBLIC_URL%/750x1334.png" media="(device-width: 375px) and (device-height: 667px)  and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    
    <link href="%PUBLIC_URL%/1242x2208.png" media="(device-width: 414px) and (device-height: 736px)  and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"> 
    
    <link href="%PUBLIC_URL%/1125x2436.png" media="(device-width: 375px) and (device-height: 812px)  and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
    
    <link href="%PUBLIC_URL%/828x1792.png" media="(device-width: 414px) and (device-height: 896px)  and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    
    <link href="%PUBLIC_URL%/1242x2688.png" media="(device-width: 414px) and (device-height: 896px)  and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

![cc1cc228e288f1ed5b7e09e122235ff7.jpeg][]

### 在IOS手机上将页面添加到桌面 ###

具体步骤如下所示：

重点是在safari中打开，然后点击中间的分享，找到**“添加到主屏幕”**

![02f06c3585391eec08d8203aa223a41d.jpeg][]

### 在PC端上可用的全屏 ###

<template>
      <button @click="handleClick">切换全屏模式</button>
    </template>

const handleClick = () => {
    	if(document.fullscreenElement) {
    		document.exixFullscreen()
    	} else {
    		document.documentElement.requestFullscreen()
    	}
    }

监听全屏事件：

// 方式1
    document.onfullscreenchange = () => {
    	// do something
    }
    
    // 方式2
    document.addEventListener('fullscreenchange', () => {
    	// do something
    })

<table> 
 <tbody> 
  <tr> 
   <th></th> 
   <th>w3c标准</th> 
   <th>谷歌</th> 
   <th>火狐</th> 
   <th>IE</th> 
  </tr> 
  <tr> 
   <td>置为全屏模式</td> 
   <td>requestFullScreen</td> 
   <td>webkitRequestFullScreen</td> 
   <td> <p>mozRequestFullScreen</p> </td> 
   <td>msRequestFullScreen</td> 
  </tr> 
  <tr> 
   <td>退出全屏模式</td> 
   <td>exitFullscreen</td> 
   <td>webkitExitFullscreen</td> 
   <td>mozCancelFullScreen</td> 
   <td>msExitFullscreen</td> 
  </tr> 
  <tr> 
   <td>当前全屏模式的元素</td> 
   <td> <p>fullscreenElement</p> </td> 
   <td>webkitFullscreenElement</td> 
   <td> <p>mozFullScreenElement</p> </td> 
   <td>msFullscreenElement</td> 
  </tr> 
 </tbody> 
</table>

全屏API参考链接：[全屏 API - Web API 接口参考 | MDN][API - Web API _ _ MDN]

ios全屏模式下避免跳转到safari浏览器待测试代码：

//Mobile Safari in standalone mode
    if (("standalone" in window.navigator) && window.navigator.standalone) {
            // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
        var noddy,
            remotes = false;
        document.addEventListener('click', function(event) {
            noddy = event.target;
            //Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
            while (noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
                noddy = noddy.parentNode;
            }
            if ('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)) {
                event.preventDefault();
                document.location.href = noddy.href;
            }
        }, false);
        alert('请安装新版本！');
        location.href='../../dist/index.html';
    
    }
        //ios8 兼容
       if( navigator.appVersion.match(/(iPad|iPhone|iPod)/g) && navigator.appVersion.match(/OS 8/g)){
       	$(document).ready(function(){
    //   		$('#ios8_statusbar').show();
    //   		$('body').css('padding-top','20px');
    //   		$('#main_panel').css('top','20px');
       		
       	});
       }

[mobile]: https://so.csdn.net/so/search?q=mobile&spm=1001.2101.3001.7020
[safari]: https://so.csdn.net/so/search?q=safari&spm=1001.2101.3001.7020
[Safari HTML Reference - Supported Meta Tags]: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
[Safari15]: https://www.wubin.work/blog/articles/322
[ac6c954650dc33b540fb2b1fac067903.jpeg]: https://img-blog.csdnimg.cn/img_convert/ac6c954650dc33b540fb2b1fac067903.jpeg
[cc1cc228e288f1ed5b7e09e122235ff7.jpeg]: https://img-blog.csdnimg.cn/img_convert/cc1cc228e288f1ed5b7e09e122235ff7.jpeg
[02f06c3585391eec08d8203aa223a41d.jpeg]: https://img-blog.csdnimg.cn/img_convert/02f06c3585391eec08d8203aa223a41d.jpeg
[API - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API