我有一个键盘显示在页面底部,键盘上面有一个scroll-view,在键盘的样式里,有这样一行,可以实现在iphoneX上避开底部黑线:
margin-bottom: env(safe-area-inset-bottom);
上面那一行确认是可以实现在iPhoneX(底部需要避开的机型)和普通方屏手机的兼容效果的。
在JS里,我也需要知道底部安全区域是多少,进而动态调整键盘和scroll-view的高度,避免键盘遮挡住scroll-view。
问题:既然这一行代码在CSS里能获取,那在JS里怎样同步知道呢?或者CXX-JX可以传递参数吗?
说明:网络上大部的实现方法是:
1、在JS里获取机型看是不是iPhoneX,如果是,用高度再减34px。(这个我不太赞同,因为现在苹果这样的机型太多了,而且系统信息有些机型未必能获取)
2、在JS里获取机型看safeArea里的bottom值与screenHeight高度是否一样,如果不一样,就说明需要调整底部,如下:
- safeArea: {right: 375, bottom: 812, left: 0, top: 44, width: 375, …}
- screenHeight: 812
- screenWidth: 375
我在模拟器尝试了几个机型(有底部安全区域问题的),发现这两个值都是一样的。
/*键盘样式*/
.keyBoardPanel {
position: fixed;
bottom: 0;
width: 100%;
background-color:#FFF;
margin-bottom: env(safe-area-inset-bottom);
font-size: 28rpx;
min-height: 100rpx;
}

你用的方法2,在真机调试也是同样的结果吗?
console.log(wx.getSystemInfoSync())var screenHeight = wx.getSystemInfoSync().screenHeightvar safeAreaHeight = wx.getSystemInfoSync().safeArea.heightvar liuhai = wx.getSystemInfoSync().safeArea.topvar windowHeight = wx.getSystemInfoSync().windowHeightvar windowWidth = wx.getSystemInfoSync().windowWidthvar statusBarHeight = wx.getSystemInfoSync().statusBarHeight//默认底部横线 = 0var bottomLine = 0//如果屏幕高度-顶部流海 大于 安全高度,说明底部有横线需要减if ((screenHeight - liuhai)> safeAreaHeight){bottomLine = screenHeight - liuhai - safeAreaHeight}console.log("screenHeight", screenHeight)console.log("bottomLine", bottomLine)console.log(wx.getSystemInfoSync())//获取窗口高度存储到全局变量px转换为rpxapp.globalData.heightWindow_G = (windowHeight - bottomLine) * 750 / wx.getSystemInfoSync().windowWidth;//状态栏高度80rpx,键盘最小100rpx/键盘显示时670rpx,//显示键盘时,收发列表高度that.data.scrollHeightKeyboard = app.globalData.heightWindow_G - statusBarHeight - 80 - 670//隐藏键盘时,收发列表高度that.data.scrollHeightFull = app.globalData.heightWindow_G - statusBarHeight - 80 - 100//初次启动,收发列表为隐藏键盘高度scrollHeight = that.data.scrollHeightFull