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

apple-mobile-WEB-app-capable

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

就像下面这样，

1. 没有上下的工具栏
2. 切换的时候跟普通 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页面添加一个在桌面上显示的图标。

    
来源地址：https://blog.csdn.net/weixin_44786530/article/details/129705389