小程序IOS安全区问题处理整理

一、IOS苹果手机安全区展示交互，Fixed底部工具栏css处理

底部Fixed工具栏，要做屏幕适配时，需要这样写

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

** 注意：**env () 和 constant () 需要同时存在，而且顺序不能换。

使用案例：

/*****工具按钮栏******/

.tool {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1rpx solid #ddd;
  box-shadow: 0 -1px 5px 0 #eee;
  background-color: #fff;
  /* z-index: 100; */
  height: 43px;
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

 

二、IOS苹果手机安全局js使用名处理

wx.getSystemInfo(Object object)返回safeArea，在竖屏正方向下的安全区域。

参考官网：wx.getSystemInfo(Object object) | 微信开放文档

 

更多：

 小程序自定义导航栏使用整理

微信小程序保存视频到相册wx.saveVideoToPhotosAlbum（）

wx.scanCode(Object object)使用详解