在苹果safari上实现全屏效果(让web页面以独立app的形式运行)

19409次阅读 1470人点赞 作者: WuBin 发布时间: 2022-12-14 15:51:59
扫码到手机查看

apple-mobile-web-app-capable

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

就像下面这样,

  1. 没有上下的工具栏
  2. 切换的时候跟普通 app 没什么不同
苹果官方对safari可用 meta 标签的说明Safari HTML Reference - Supported Meta Tags

只需要添加下面一行即可

<!--ios和Android都支持-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--仅Android支持-->
<meta name="mobile-web-app-capable" content="yes">

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

apple-mobile-web-app-capable如果设置contentyes,应用以全屏模式运行,否则不会在全屏中运行。

同时,也要搭配

<meta name="apple-mobile-web-app-status-bar-style" content="default">

apple-mobile-web-app-status-bar-style用于定义状态栏文字颜色的,可选值有defaultblack-translucentblack

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

defaultblack为不透明,看不到下面的内容。

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

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

<meta name="theme-color" content="#fff">

可以参考我的另一篇文章:《置网页在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,当然对于不同的设备会用不同的尺寸对应:下面是详细尺寸

简单总结下:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网站开启对 web app 程序的支持 具体表现为去除浏览器地址栏和底部导航栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 
用来定义顶部状态栏的形式默认是default为白色 black为黑色 black-translucent为灰色半透明
(会占据屏幕的约20px,不同的设备可能会有差异)
-->
<!-- 
在定义了apple-mobile-web-app-capable的前提下,
设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效; 
-->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="application-name" content="web独立页面的名称">
<!-- 放在桌面上的图标 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="icon.png">
<!-- 状态栏的背景色 -->
<meta name="theme-color" content="#fff">

还可以配置启动动画

<!-- apple-touch-startup-image用来配置启动动画 -->
<!-- 这里要注意,这里图片的尺寸要和设备的静态图片显示尺寸完全对应,差一个像素都会导致启动动画无法显示 -->
<!-- 下面列举了iPhone的所有尺寸(ps:为了方便大家就全部贴出来了!!) -->
<!-- iPhone 678 startup image @2x-->  
<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">
<!-- iPhone 678p startup image @3x-->
<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"> 
<!-- iPhone X Xs startup image @3x-->
<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">
<!-- iPhone XR startup image @2X -->
<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">
<!-- iPhone XR Max startup image @3x-->
<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">   

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

具体步骤如下所示:

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

在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
})
w3c标准谷歌火狐IE
置为全屏模式requestFullScreenwebkitRequestFullScreen

mozRequestFullScreen

msRequestFullScreen
退出全屏模式exitFullscreenwebkitExitFullscreenmozCancelFullScreenmsExitFullscreen
当前全屏模式的元素

fullscreenElement

webkitFullscreenElement

mozFullScreenElement

msFullscreenElement

全屏API参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API

相关资料

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:apple-mobile-web-app-capable,safari全屏
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8337次阅读 531人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3474次阅读 255人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13422次阅读 867人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12217次阅读 392人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    10562次阅读 846人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    14437次阅读 1153人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14342次阅读 1167人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    27483次阅读 2157人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    23619次阅读 1820人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录