在苹果safari上实现全屏效果（让web页面以独立app的形式运行） |
您所在的位置：网站首页 › 网页游戏如何全屏 › 在苹果safari上实现全屏效果（让web页面以独立app的形式运行） |
|
apple-mobile-web-app-capable 你可能不知道的一个功能：web 单页面应用可以在手机端以类似独立 app 的形式运行。 就像下面这样， 没有上下的工具栏切换的时候跟普通 app 没什么不同苹果官方对safari可用 meta 标签的说明Safari HTML Reference - Supported Meta Tags只需要添加下面一行即可 添加meta标签，打开谷歌浏览器点击添加到主屏幕，重新启动，实现自动全屏（没有底部的地址栏了）。 apple-mobile-web-app-capable如果设置content为yes，应用以全屏模式运行，否则不会在全屏中运行。 同时，也要搭配 apple-mobile-web-app-status-bar-style用于定义状态栏文字颜色的，可选值有defaultblack-translucentblack black-translucent为透明，内容滚动的时候，透过状态栏可以看到下面的内容。 defaultblack为不透明，看不到下面的内容。 default为白色 black为黑色 black-translucent为灰色半透明如果不放心，就再配合下面这个meta，将顶部状态栏变为白色。 可以参考我的另一篇文章：《置网页在Safari15浏览器顶部状态栏的颜色》 以上meta只会在你把这个页面添加到主屏幕时才会生效。 注意这个功能需要你的页面是或项目是单页面应用才行，比如 vue 项目。如果是多个 html 页面的项目，在使用的时候很不友好，像这样：（跳转时上面和下面会多出工具栏）添加桌面图标有了这种功能，我们还需要给独立web页面添加一个在桌面上显示的图标。 这里会有一个app图标尺寸问题一般使用120*120，当然对于不同的设备会用不同的尺寸对应：下面是详细尺寸简单总结下： 还可以配置启动动画 在IOS手机上将页面添加到桌面具体步骤如下所示： 重点是在safari中打开，然后点击中间的分享，找到“添加到主屏幕” 在PC端上可用的全屏 切换全屏模式 const handleClick = () => { if(document.fullscreenElement) { document.exixFullscreen() } else { document.documentElement.requestFullscreen() } }监听全屏事件： // 方式1 document.onfullscreenchange = () => { // do something } // 方式2 document.addEventListener('fullscreenchange', () => { // do something })w3c标准谷歌火狐IE置为全屏模式requestFullScreenwebkitRequestFullScreenmozRequestFullScreen msRequestFullScreen退出全屏模式exitFullscreenwebkitExitFullscreenmozCancelFullScreenmsExitFullscreen当前全屏模式的元素fullscreenElement webkitFullscreenElementmozFullScreenElement msFullscreenElement全屏API参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API 相关资料 JS实现全屏模式 如何让web页面以独立app的形式运行meta:apple-mobile-web-app-capable 关于在Safari浏览器中将网页添加到主屏幕的相关设置（自定义图标，启动动画，自定义名称） |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |