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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

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的忽略安全距离

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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