技術標籤：csscss

iPhoneX 及以上 手機底部適配 CSS3

概述：iOS移動端裝置從iphoneX之後幾乎都是全面屏，劉海屏。但是像這種全面屏的iOS裝置，在底部有一個選單撥出按鈕，這個時候我們就需要進行相應的適配。這裡我簡單記錄下我自己在工作中使用的適配方式。

1. 需求場景
   實現iPhoneX 及以上的手機底部適配，
   當瀏覽器底部的選單欄被隱藏的時候，位於底部的選項框自動增加高度
   當瀏覽器底部的選單欄被顯示的時候，位於底部的選項框自動減少高度

2. 實現方式
   在css中有一個計算屬性 calc() , 將需要計算的值（帶單位）放到這個屬性中，就能夠實現計算

例如：

.footer
 
{
	height:calc(10px + 20px);
	width:calc(10vw + 20%);
}

在iOS的系統中，為了實現簡單的底部適配，蘋果設計了一個安全區域的css屬性值，哪裡需要就加在哪裡

 constant(safe-area-inset-bottom);
 env(safe-area-inset-bottom);

例如

.footer{
	height:calc(10px + constant(safe-area-inset-bottom));
	height:calc(10px + env(safe-area-inset-bottom));
}

這樣就能夠實現iPhone底部的自動適配了

3. 結語
   其實使用CSS 對iOS高版本的底部適配還是比較簡單的，還有就是通過螢幕的邏輯解析度和瀏覽器的navigator.useragent的識別來實現不同機型的判斷，這個js比較繁瑣就不詳述了，還是希望大家簡單快捷的解決當前的問題。希望大家能夠有所收穫！