将网站链接添加至手机主屏，进入后页面会出现浏览器的头部和底部，需实现内容全屏展示，无浏览器头部和底部。( 用vue3 实现，以Safair为例)

要实现在Safari浏览器中将网站添加至手机主屏时内容全屏展示，可以通过以下步骤进行：

1. 在 `public/index.html` 文件中添加以下 meta 标签，用于设置网站在添加至主屏时的显示模式：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

`apple-mobile-web-app-capable` 用于设置网站是否可以以全屏模式在主屏上打开，`content="yes"` 表示可以。

`apple-mobile-web-app-status-bar-style` 表示状态栏样式，设置为 `black-translucent` 可以使内容不被状态栏遮挡。

2. 在 `main.js` 文件中添加以下代码，用于在路由切换时判断是否为主屏打开，并设置页面全屏展示：

import router from './router'

router.beforeEach((to, from, next) => {
  const isFromHome = from.path === '/'
  const isToAddHome = to.path === '/'
  const isAddToHome = window.navigator.standalone === true
  if (isFromHome && isToAddHome && isAddToHome) {
    // 从主屏打开，并且是进入主页，则全屏展示
    document.documentElement.style.height = '100%'
    document.documentElement.style.overflow = 'hidden'
    next(false)
  } else {
    next()
  }
})

在判断条件中，`from.path === '/'` 表示从主页进入，`to.path === '/'` 表示进入主页，`window.navigator.standalone === true` 表示是从主屏打开。

如果以上三个条件都满足，则表示是从主屏打开并进入主页，此时设置 `html` 元素的高度为 `100%`，并隐藏溢出内容，实现全屏展示。

3. 最后，在 `App.vue` 文件中添加以下样式，用于设置内容高度为全屏高度：

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

以上是实现在 Safari 浏览器中将网站添加至手机主屏时内容全屏展示的步骤，如果在其他浏览器中有类似需求，可以根据不同浏览器的特性进行相应的调整。