Vue3 H5 應用在 iOS 平台保留狀態欄和安全區域顯示

要保留 iOS 平台上的状态栏并将内容显示在安全区域内，可以使用以下方法：

在 head 标签中添加以下 meta 标签：

<meta name='viewport' content='viewport-fit=cover'>

这个 meta 标签可以讓視口自適應設備的安全區域，並且保留状态栏。

在 CSS 中使用安全区域的属性：

body {
  padding-top: constant(safe-area-inset-top); /* iOS 11.2+ */
  padding-top: env(safe-area-inset-top); /* iOS 11.2+ */
}

這樣可以讓內容顯示在安全區域內，同時避免被状态栏遮擋。

使用 Vue Router 的路由守卫，在进入頁面前检查状态栏高度：

router.beforeEach((to, from, next) => {
  const isIOS = !!navigator.userAgent.match(/\(i[^;]+; (U;)? CPU.+Mac OS X/);
  const isFullScreen = window.navigator.standalone || (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches);
  const isIPhoneX = isIOS && screen.height >= 812 && screen.width >= 375;

  if (isIOS && !isFullScreen && isIPhoneX) {
    document.body.classList.add('is-iphone-x');
  }

  next();
});

這樣可以在進入頁面前檢查設備是否為 iPhone X，如果是則添加一個類名，以便在 CSS 中進行相應的調整。

以上是保留 iOS 平台上状态栏并将内容显示在安全区域內的幾種方法。根據實際情況選擇適合的方法即可。