IOS 兼容iphonex 系列手机安全区域下，底部吸底样式问题

1.由于为了适配IphoneX系列得顶部和底部，设置出了安全区域，上下2部分空出白色区域（34px,来装载底部得控制条和顶部栏），但是由于底部吸底得公共组件也是白色，与底部空出得安全区域接洽，造成底部吸底组件空出得空白区域较多显得突兀（padding-bottom+底部安全padding-top）

• 判断dang’qian由于为了适配IphoneX系列得顶部和底部，设置出了安全区域，上下2部分空出白色区域（34px,来装载底部得控制条和顶部栏），但是由于底部吸底得公共组件也是白色，与底部空出得安全区域接洽，造成底部吸底组件空出得空白区域较多显得突兀（padding-bottom+底部安全padding-top）

判断当前设备

export function checkIphoneType() {// 判断是否为ios 系统，if (window !== 'undefined' && window && userAgentType() !== 'ios') return false;// 目前市场上iphone X 系列的手机型号const xSeriesConfig = [{// iPhone Xs（Max,Pro Max）devicePixelRatio: 3,width: 414,height: 896,},{// iPhone XR（11）devicePixelRatio: 2,width: 414,height: 896,},{// iPhone X（Xs,Pro）devicePixelRatio: 3,width: 375,height: 812,},];// 获取当前 型号手机的设备信息const {devicePixelRatio,screen: { width, height },} = window;return xSeriesConfig.some((item) =>item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height,);
}

在吸底得组件加上去除padding样式

 .btn-row {display: flex;align-items: center;justify-content: center;width: 100%;position: fixed;bottom: 0;padding: 10px 16px;background: #ffffff;&.isIphoneX{padding-bottom:0px ;}}

绑定样式

 <div :class="['btn-row', isIphoneX ? 'isIphoneX' : '']" v-show="isOriginHei"><button class="home-btn add-box-btn" type="primary" @click="addNewBox"><Icon type="jiahao" /></button></div>created() {this.isIphoneX = checkIphoneType(); // 判断是否为iphone x系列的手机},

这个处理是在已经做了安全区域的情况下得一种优化。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！