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