css屬性——env()和constant()設置安全區域


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)等屬性,

可查看 使用@supports完美兼容CSS屬性

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM