env()和constant(),是IOS11新增特性,Webkit的css函數,用於設定安全區域與邊界的距離,有4個預定義變量:
- safe-area-inset-left:安全區域距離左邊邊界的距離
- safe-area-inset-right:安全區域距離右邊邊界的距離
- safe-area-inset-top:安全區域距離頂部邊界的距離
- safe-area-inset-bottom :安全距離底部邊界的距離
而env()和constant()函數有個必要的使用前提,H5網頁設置viewport-fit=cover的時候才生效,小程序里的viewport-fit默認是cover。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
未適配底部效果:
適配底部代碼:
height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2
height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
// 先constant再env
適配后效果
2021-04-23補充:
在寫小程序(自定義tabBar)發現有些古老IOS機型不支持 env(safe-area-inset-bottom)等屬性,