安卓各種屏幕尺寸焦影，也抵不過iphone這么多花樣宣增，能怎么辦呢玫膀，兼容！兼容爹脾！兼容帖旨！
留出iphonex iphone11底部的橫線距離
我的項目中使用了antd-mobile的tabBar，所以需要修改以下兩個原素的高度灵妨，你可以根據(jù)自己項目來加上安全距離解阅，留出間距
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.am-tab-bar-box, .am-tab-bar-box .am-tab-bar-bar {
height: constant(60px + env(safe-area-inset-bottom)); // tabBar原高度（60px改成你項目自己的值）+安全距離,兼容 iOS < 11.2
height: calc(60px + env(safe-area-inset-bottom)); // 兼容 iOS >= 11.2
}
.am-tab-bar-box .am-tab-bar-bar{
padding-bottom: constant(safe-area-inset-bottom); // tabBar留出底部安全距離, 兼容 iOS < 11.2
padding-bottom: env(safe-area-inset-bottom); // 兼容 iOS >= 11.2
}
}
viewport-fit
iOS11 新增特性，蘋果公司為了適配 iPhoneX 對現(xiàn)有 viewport meta 標簽的一個擴展泌霍，用于設(shè)置網(wǎng)頁在可視窗口的布局方式货抄，可設(shè)置三個值：
contain: 可視窗口完全包含網(wǎng)頁內(nèi)容（左圖）
cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口（右圖）
auto：默認值，跟 contain 表現(xiàn)一致
注意：網(wǎng)頁默認不添加擴展的表現(xiàn)是 viewport-fit=contain朱转，需要適配 iPhoneX 必須設(shè)置 viewport-fit=cover蟹地，這是適配的關(guān)鍵步驟。
css 判斷iphone安全距離肋拔，留出iphonex iphone11底部的橫線距離 env屬性只能在 viewport-fit=cover 時生效
env() 和 constant()
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no, initial-scale=1,viewport-fit=cover"/>
iOS11 新增特性锈津，Webkit 的一個 CSS 函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離凉蜂，有四個預(yù)定義的變量：
注意：當 viewport-fit=contain 時 env() 是不起作用的琼梆，必須要配合 viewport-fit=cover 使用。對于不支持env() 的瀏覽器窿吩，瀏覽器將會忽略它茎杂。
safe-area-inset-left：安全區(qū)域距離左邊邊界距離
safe-area-inset-right：安全區(qū)域距離右邊邊界距離
safe-area-inset-top：安全區(qū)域距離頂部邊界距離
safe-area-inset-bottom：安全區(qū)域距離底部邊界距離
這里我們只需要關(guān)注 safe-area-inset-bottom 這個變量，因為它對應(yīng)的就是小黑條的高度（橫豎屏時值不一樣）纫雁。
官方解釋說
The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.
這就意味著煌往，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我們還是需要做向后兼容轧邪，像這樣：
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
底部tabbar代碼
.footer {
position: fixed;
width: 100%;
bottom: 0;
background: #f7f7f7;
border-top: 0.01rem solid #d7d8da;
z-index: 9999;
height: constant(55px + env(safe-area-inset-bottom)); // tabBar原高度（60px改成你項目自己的值）+安全距離,兼容 iOS < 11.2
height: calc(55px + env(safe-area-inset-bottom)); // 兼容 iOS >= 11.2
padding-bottom: constant(safe-area-inset-bottom); // tabBar留出底部安全距離, 兼容 iOS < 11.2
padding-bottom: env(safe-area-inset-bottom); // 兼容 iOS >= 11.2
}
頁面內(nèi)容區(qū)域
.content-box-l{
padding-bottom: constant(safe-area-inset-bottom); // tabBar留出底部安全距離, 兼容 iOS < 11.2
padding-bottom: env(safe-area-inset-bottom); // 兼容 iOS >= 11.2
}
