高亮的博客

# 其他

# css safe-area-inset-bottom 解释

  • env(safe-area-inset-bottom)
  • env(safe-area-inset-top)

他们属于CSS中的变量，用于获取设备底部和顶部安全区域的大小。

所谓的安全区域就是指在iPhone X及以上的设备中，为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域，以确保内容在安全区域内显示。

# 和padding的结合

padding-bottom: env(safe-area-inset-bottom);

# 如果想让安全区域再靠上20px，则结合calc使用如下

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

# 和height的结合

height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) ;

# 注意

以上写法貌似在兼容iphoneX的工程上宣告结束了...然而...在某些机型上识别不出env(safe-area-inset-bottom)和env(safe-area-inset-top)，导致高度等失效，需要再做一次兼容，兼容某些不识别这些变量的机型。拿和height结合举例说明，可做如下兼容

/*
    兼容普通机型，不识别变量的机型：
*/
height: calc(100vh - 144px);
/*
    兼容苹果手机
*/
height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

/*
    constant 已被废弃
*/
constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/

如果识别这两个变量，则执行第二句，覆盖第一句；如果不识别这两个变量呢，则不识别第二句，执行第一句。这就是一个完美的兼容写法！

← JS →