ios安全距离背景颜色设置 ipad安全距离

小程序ios安全距离及CSS的计算

• 为什么要设置安全距离

• 使用wx.getSystemInfo()
• 使用env()或constant()
• 问题

• calc使用案例
• style传变量定义CSS值

为什么要设置安全距离

一句话就是让元素ios底部有一定的距离，不要被小黑条遮挡，当然安卓也要考虑距底部的距离只是不用考虑安全距离了。

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。

使用wx.getSystemInfo()

知道了什么事安全区域对于小程序可以使用使用wx.getSystemInfo()中的safeArea对象获取底部小黑条的高度。getSystemInfo官方文档介绍，小黑条的高度就是screenHeight-bottom的数值，再对对应元素设置padding-bottom就可以了。

使用env()或constant()

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离

有一点要注意，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。
具体使用：

padding-bottom: calc(env(safe-area-inset-bottom) + 10px);

问题

当某些苹果机型下方有小黑条时会出现底部高度过高的情况

正常情况应该为

所以设置如下示例调整

<view class="page-footer">
	<view class="footer-action">
		<button>底部按钮</button>
	</view>
</view>

.page-footer {
    padding-bottom: calc(env(safe-area-inset-bottom) - 30rpx); //外部设置 padding-bottom
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
}
.page-footer .footer-action {
    padding: 0 40rpx;
    width: 100%;
    height: 150rpx; // 内部定高
    display: flex;
    align-items: center;
    justify-content: center;
}

calc使用案例

calc()把计算的事情交给浏览器，具体使用规则：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

width: calc(100px + 50px);
width: calc(100% - 50px);
width: calc( 100% / calc(100px * 2) );
font-size: calc(100vw / 30);
width: calc(100% / 6);
/*居中案例 宽高为300*/
.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

style传变量定义CSS值

如下案例：statusBarHeight、navbarHeight、headerHeight可接受data中的值，再由–status-bar-height、–navbar-height、–header-height传给CSS中的元素进行使用。

<view class='page'
style="--status-bar-height:{{statusBarHeight}}px; --navbar-height:{{navbarHeight}}px; --header-height:{{headerHeight}}px">
	<view class='header'></view>
</view>

.header {
  padding-top: var(--status-bar-height);
  display: flex;
  padding-left: 50rpx;
  padding-right: 50rpx;
  flex-direction: row-reverse;
}