JS获取iOS iPhone安全区域SafeArea

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

手机型号	尺寸（pt)	倍数	屏幕（px）	状态栏高度	顶部安全距离	底部安全距离
iPhone14Pro、iPhone15Pro、iPhone15	393 * 852	3	1179 * 2556	54pt	59pt	34pt(竖屏) / 21pt(横屏)
iPhone14ProMax iPhone15ProMax、iPhone15plus	430 * 932	3	1290 * 2796	54pt	59pt	34pt(竖屏) / 21pt(横屏)
iPhone12、iPhone12Pro、iPhone13、iPhone13Pro、iPhone14	390 * 844	3	1170 * 2532	47pt	47pt	34pt(竖屏) / 21pt(横屏)
iPhone12ProMax、iPhone13ProMax、iPhone14Plus	428 * 926	3	1284 * 2778	47pt	47pt	34pt(竖屏) / 21pt(横屏)
iPhone12mini、iPhone13mini	375 * 812	3	1125 * 2436	50pt	50pt	34pt(竖屏) / 21pt(横屏)
iPhoneXS Max、iPhone11ProMax	414 * 896	3	1242 * 2688	44pt	44pt	34pt(竖屏) / 21pt(横屏)
iPhoneX、iPhoneXS、iPhone 11 Pro	375 * 812	3	1125 * 2436	44pt	44pt	34pt(竖屏) / 21pt(横屏)
iPhoneXR、iPhone 11	414 * 896	2	828* 1792	48pt	48pt	34pt(竖屏) / 21pt(横屏)
iPhone6 Plus、iPhone6s Plus、iPhone7 Plus、iPhone8 Plus	414 * 736	3	1242x2208	20pt	20pt	---
iPhone6、iPhone6s、iPhone7、iPhone8、iPhoneSE2、iPhoneSE3	375 * 667	2	750 * 1334	20pt	20pt	---

在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时顶部如果有返回按钮啥的注意距离顶部的距离，否则有可能造成跑到状态来上去了