HTML中获取iOS手机安全区域SafeArea

苹果手机iPhone X及以上版本都带有刘海屏，14pro以上版本变成了所谓灵动岛，所以顶部和底部都有一个安全区域。

在web网页中需要根据安全区域从而适当的调整布局，  那么如何获取顶部和底部安全区域的高度呢。直接上代码

const bottomAreaHeight = ref(0)
let safeAreaHeightValue = 0
let topSafeAreaHeight = 0
let bottomSafeAreaHeight = 0
onMounted(() => {
  // 获取底部安全区域的高度
  const isIphone = /iPhone/i.test(navigator.userAgent)

  if (isIphone) {
    safeAreaHeightValue = window.screen.height - window.innerHeight

    if (safeAreaHeightValue >= 44) {
      bottomSafeAreaHeight = 34
    }

    switch (safeAreaHeightValue) {
      case 93:
      case 59:
        topSafeAreaHeight = 59
        break

      case 81:
      case 47:
        topSafeAreaHeight = 47
        break

      case 84:
      case 50:
        topSafeAreaHeight = 50
        break

      case 78:
      case 44:
        topSafeAreaHeight = 44
        break

      case 82:
      case 48:
        topSafeAreaHeight = 48
        break

      case 20:
        topSafeAreaHeight = 20
        break

      default:
        break
    }
  }
  bottomAreaHeight.value = bottomSafeAreaHeight

 为什么是两种数值对应一个相同的值呢，主要原因是iOS端有可能设置Webview的忽略安全距离

import SwiftUI
import WebKit
struct ContentView: View {
    @State var url: String? = "https://www.baidu.com"
    var body: some View {
        SWKWebView(url: $url).edgesIgnoringSafeArea(.all)
        //top 93 bottom 59 all 59
    }
}

#Preview {
    ContentView()
}

拿iPhone15举例来说，edgesIgnoringSafeArea(.all)和edgesIgnoringSafeArea(.bottom)，window.screen.height：852，innerHeight:793，差值为59，

edgesIgnoringSafeArea(.top)或者不设置时 "innerHeight":759,"screnHeight":852，差值为93。

另外需要注意设置edgesIgnoringSafeArea(.top)和all时顶部如果有返回按钮啥的注意距离顶部的距离，否则有可能造成跑到状态来上去了