css適配iPhoneX屏幕安全區

時間 2019-11-08

原文原文鏈接

場景

iPhoneX對比起之前其餘的手機，屏幕頂部變成了留海屏，底部取消了物理按鍵改爲了小黑條，這種改動致使了web開發中頁面上新的適配問題。css

好比一些須要貼在底部的按鈕，和呼起的tabBar和底部彈出框，在iphoneX上就會出現被小黑條遮擋內容，或者頁面上出現白色空隙的問題。html

先上解決代碼

<head>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>
</head>

body {height: 100vh;}
/* 你的貼底元素↓ */
.container {
  position: aboslute;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  ...
}

幾個新知識

安全區域

安全區域指的是一個可視窗口範圍，處於安全區域的內容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響，以下圖藍色區域：ios

Apple的官方文檔：adaptivity-and-layoutweb

viewport-fit

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

contain: 可視窗口徹底包含網頁內容（左圖）
cover：網頁內容徹底覆蓋可視窗口（右圖）
auto：默認值，跟 contain 表現一致

<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>

參考文檔：viewport-fit-descriptorapp

env

iOS11 新增特性，Webkit 的一個 CSS 函數，用於向 CSS 插入用戶代理定義的變量設定安全區域與邊界的距離，有四個預約義的變量：iphone

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

env()必須配合 viewport-fit=cover 使用!

咱們最經常使用的就是 safe-area-inset-bottom, 這個表明着不被小黑條遮擋的安全距離。ide

padding-bottom: env(safe-area-inset-bottom);

參考文檔：designing-websites-for-iphone-x，MDN/env()svg

reference

https://aotu.io/notes/2017/11...函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。