css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白设置安全区域与边界的距离

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离

safe-area-inset-right：安全区域距离右边边界距离

safe-area-inset-top：安全区域距离顶部边界距离

safe-area-inset-bottom：安全区域距离底部边界距离

安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图1蓝色区域图2绿色区域

图1

图2

而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover 可以直接使用 H5设置如下

<meta name="viewport" content="width=device-width, viewport-fit=cover">

使用方法：

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

之所以写了constant和env两种是因为ios11.2版本以后constant废弃，env生效写2种是兼容所有ios版本官方自从11.2后废弃constant说明截图如下：

官方在11.2版本之后还增加了max() min() 去解决兼容横纵向切换时出现的问题设置safe-area-inset-left左边距距离横向正常恢复为纵向时，env(safe-area-inset-left)被解析为0px 左侧内容会紧贴屏幕所以使用如下方式做兼容

@supports(padding: max(0px)) {.post {padding-left: max(12px, env(safe-area-inset-left));padding-right: max(12px, env(safe-area-inset-right));}
}

附官方相关详情文档链接：Designing Websites for iPhone X

css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白设置安全区域与边界的距离相关推荐

html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录前言 ...
iphoneX底部小黑条适配问题
背景公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题原因在苹果 iPhoneX .iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸 ...
vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条
场景由于iPhoneX去掉了物理按键,改为了底部小黑条,这就会导致屏幕适配问题,最常见的场景就是底部fixed的元素被阻挡的情况.对于这种问题,我们一般采取css或js的处理方式(适用于h5,小程序 ...
1分钟解决微信小程序 iPhone 11、iPhoneX 底部安全区域（底部小黑条）适配
[最新:目前微信官方已适配iPhone11手机型号,分别为:iPhone 11,iPhone 11 Pro Max] iPhone X 对于微信小程序的tabbar来说,会被底部小黑条覆盖,需要处 ...
H5页面适配iphoneX底部小黑条遮盖内容
iphoneX取消了物理按键,改为底部小黑条,这也在页面开发的过程中,会出现底部内容被小黑条遮盖的现象,影响页面效果, 我们可以这也解决 1:增加viewport属性 viewport-fit=&qu ...
H5移动端网页适配iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 机型底部小黑条
iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部 ...
微信小程序适配iPhoneX底部小黑条
微信小程序适配 iPhone X 底部小黑条一.在 app.js 中获取到设备信息 getSystemInfo 获取设备信息,然后将底部距离保存到 globalData 中方便页面读取当然如果项目 ...
uniapp兼容iPhoneX头部状态栏(刘海屏）和底部小横条
文章目录 (一)兼容 iphoneX 头部状态栏方式一:封装状态栏组件 statusBar.vue 方式二:不封装组件方式三:使用 Vuex 管理完整demo展示: (二)兼容 iPhoneX ...

css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白设置安全区域与边界的距离

css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白设置安全区域与边界的距离相关推荐

最新文章

热门文章

css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白 设置安全区域与边界的距离

css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白 设置安全区域与边界的距离相关推荐

最新文章

热门文章

css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白设置安全区域与边界的距离

css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白设置安全区域与边界的距离相关推荐