小程序IOS安全区域优化：safe-area-inset-bottom

最近发现公司的小程序代码中有一些很陌生的代码safe-area-inset-bottom，本以为是什么高级用法，查阅资料才发现是我孤陋寡闻了，原来是css的属性。

先来说一下用法及作用：

IOS全面屏底部有小黑线，位于底部的元素会被黑线阻挡，可以使用以下样式：

.model{padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

获取高度时，可用：

.model{height: calc(100% -  constant(safe-area-inset-bottom));height: calc(100% -  env(safe-area-inset-bottom));
}

tips:先使用constant 再使用 env

知识点扫盲

下面把相关知识点整理如下：
env() 与 constant() 设置安全区域，是css里IOS11新增的属性，webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left: 安全区域距离左边界的距离
safe-area-inset-right: 安全区域距离右边界的距离
safe-area-inset-top: 安全区域距离顶部边界的距离
safe-area-inset-bottom: 安全区域距离底部边界的距离

需要的注意一点：H5网页设置 viewport-fit=cover的时候才会生效，小程序里的viewport-fit默认是 cover。
为了更好的理解上文意思，我们来看一下未适配的底部效果：

适配后的效果：

小程序IOS安全区域优化：safe-area-inset-bottom相关推荐

小程序 ios 全面屏底部留出安全距离
小程序 ios 全面屏底部留出安全距离问题描述对于苹果手机,底部有安全距离,一些底部会有遮挡,当然可以通过过去系统信息动态设置底部距离.下面提供一个用 css 设置底部安全距离的方案解决方案苹 ...
小程序IOS页面下拉回弹效果
小程序IOS页面下拉回弹效果小程序在ios系统上的橡皮筋回弹效果,是ios特有的,目前小程序没有特有的方法去控制.根据业务需求不想要这个回弹的效果,故此记录一下解决方案: 方案一:当页面内容比较 ...
ios 上传图片失败小程序_微信小程序ios端使用ajaxSubmit上传图片失败，android没问题...
微信小程序ios端使用ajaxSubmit上传图片失败,android没问题微信小程序开发上传图片,使用ajaxsubmit,post请求,form设置multipart/form-data, a ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
微信小程序ios端唤醒不了拨打电话或者部分电话拨打不了解决方案
目录简介技术问题解决方案简介主要解决微信小程序ios端唤醒不了拨打电话或者部分电话拨打不了问题,使用安卓手机就可以轻松的唤醒拨打电话. 技术 uni-app前端小程序框架问题在调试微信 ...
微信小程序Canvas卡顿优化解决方法
文章目录一.引入二.分析问题三.解决方法四.解决后效果图五.绘制好的地图一.引入原安卓图书馆选座项目CSDN博客链接: Android图书馆选座系统课程设计最近在搞微信小程序,想把以前 ...
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
微信小程序iOS虚拟支付问题汇总
一.做了一款在线听课的小程序,是否涉及到小程序虚拟支付的问题? 是,影响最大的还是那些把IOS会员当做变现唯一手段的小程序.如果小程序只是服务老用户,拉新.裂变等较少,影响自然少一点. 二.什么是虚拟 ...
微信小程序 ios自定义导航栏下拉“橡皮筋” 效果
问题: 1.微信小程序ios中如果自定义导航栏取消了橡皮筋效果页面无法滑动 2.如果不取消,页面往下拉时会与顶部有一大片空白(安卓本身scrollTop不会有负值) 3.fixed之后absolute ...
微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏）
微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏) 1.ios中个别机型类似6s ,对微信自带的scroll-view无法滑动: 解决:在滑动内容区添加css属性,overflow: auto ...

小程序IOS安全区域优化：safe-area-inset-bottom

知识点扫盲

小程序IOS安全区域优化：safe-area-inset-bottom相关推荐

最新文章

热门文章