小程序适配IOS底部小黑条

1、IOS底部小黑条高34px进行适配

2、使用css

兼容ios<11.2 padding-bottom: constant(safe-area-inset-bottom); 底部安全区域812 - 778 = 34 兼容ios>11.2 padding-bottom: env(safe-area-inset-bottom); env() 跟 constant() 需要同时存在，而且顺序不能换

.container-css-fit{

box-sizing: border-box;

width: 100%;

height: 100vh;

/* 兼容ios<11.2 */

padding-bottom: constant(safe-area-inset-bottom); /* 底部安全区域812 - 778 = 34*/

/* 兼容ios>11.2 */

padding-bottom: env(safe-area-inset-bottom);

/* env() 跟 constant() 需要同时存在，而且顺序不能换 */

}

.container-wrap{

width: 100%;

height: 100%;

background-color: plum;

}

3、使用getSystemInfoSync计算安全区域

const res = wx.getSystemInfoSync() const result = { …res, bottomSafeHeight: 0, isIphoneX: false, isMi: false, isIphone: false, isIpad: false, isIOS: false, isHeightPhone: false, } const modelmes = result.model const system = result.system // 判断设备型号 if (modelmes.search(‘iPhone X’) != -1 || modelmes.search(‘iPhone 11’) != -1) { result.isIphoneX = true; } if (modelmes.search(‘MI’) != -1) { result.isMi = true; } if (modelmes.search(‘iPhone’) != -1) { result.isIphone = true; } if (modelmes.search(‘iPad’) > -1) { result.isIpad = true; } let screenWidth = result.screenWidth let screenHeight = result.screenHeight // 宽高比自适应 screenWidth = Math.min(screenWidth, screenHeight) screenHeight = Math.max(screenWidth, screenHeight) const ipadDiff = Math.abs(screenHeight / screenWidth - 1.33333) if (ipadDiff < 0.01) { result.isIpad = true } if (result.isIphone || system.indexOf(‘iOS’) > -1) { result.isIOS = true } const myCanvasWidth = (640 / 375) * result.screenWidth const myCanvasHeight = (1000 / 667) * result.screenHeight const scale = myCanvasWidth / myCanvasHeight if (scale < 0.64) { result.isHeightPhone = true } result.navHeight = result.statusBarHeight + 46 result.pageWidth = result.windowWidth result.pageHeight = result.windowHeight - result.navHeight if (!result.isIOS) { result.bottomSafeHeight = 0 } const capsuleInfo = wx.getMenuButtonBoundingClientRect() // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点 // 胶囊热区 = 胶囊和状态栏之间的留白 * 2 (保持胶囊和状态栏上下留白一致) * 2(设计上为了更好看) + 胶囊高度 const navbarHeight = (capsuleInfo.top - result.statusBarHeight) * 4 + capsuleInfo.height // 写入胶囊数据 result.capsuleInfo = capsuleInfo; // 安全区域 const safeArea = result.safeArea // 可视区域高度 - 适配横竖屏场景 const height = Math.max(safeArea.height, safeArea.width) // 状态栏高度 const statusBarHeight = result.statusBarHeight // 获取底部安全区域高度（全面屏手机） if (safeArea && height && screenHeight) { result.bottomSafeHeight = screenHeight - height - statusBarHeight if (result.bottomSafeHeight < 0) { result.bottomSafeHeight = 0 } } // 设置header高度 result.headerHeight = statusBarHeight + navbarHeight // 导航栏高度 result.navbarHeight = navbarHeight

相关阅读