背景

我們做在 ios 的 web 頁面時候，需要適配底部的黑邊，加上安全距離。

IOS新特性

iOS11 新增特性，蘋果公司為了適配 iPhoneX 對現有 viewport meta 標簽的一個擴展，用于設置網頁在可視窗口的布局方式，可設置三個值：

• contain: 可視窗口完全包含網頁內容
• cover：網頁內容完全覆蓋可視窗口
• auto：默認值，跟 contain 表現一致

注意：網頁默認不添加擴展的表現是 viewport-fit=contain，需要適配 iPhoneX 必須設置 viewport-fit=cover，小程序里的viewport-fit默認是cover

實踐

height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2 height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2 padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2// 先constant再env

• safe-area-inset-left：安全區域距離左邊邊界距離
• safe-area-inset-right：安全區域距離右邊邊界距離
• safe-area-inset-top：安全區域距離頂部邊界距離
• safe-area-inset-bottom：安全區域距離底部邊界距離

效果

參考文檔

https://blog.csdn.net/qq_42354773/article/details/81018615

總結

以上是生活随笔為你收集整理的css：ios底部安全距离适配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。