螢幕尺寸
垂直方向上,iPhone X的顯示寬度與iPhone 6,iPhone 7 和 iPhone 8 的 4.7 英寸一樣,但是比4.7英寸的螢幕高145pt。
安全區域
安全區域指的是一個可視視窗範圍,處於安全區域的內容不受圓角(corners)、齊劉海(sensor housing)、小黑條(Home Indicator)影響
viewport-fit
通過對meta標籤viewport的擴充套件,可以調整頁面的展現區域。viewport-fit有三個可選值:
contain:使頁面展示在安全區域內。
cover: 使頁面佔滿螢幕。
auto: 和 contain 選項表現一樣
iOS11 新增特性,Webkit 的一個 CSS 函式,用於設定安全區域與邊界的距離,有四個預定義的變數:
safe-area-inset-left:安全區域距離左邊邊界距離
safe-area-inset-right:安全區域距離右邊邊界距離
safe-area-inset-top:安全區域距離頂部邊界距離
safe-area-inset-bottom:安全區域距離底部邊界距離
env() 和 constant()
因為之前使用的constant已經被棄用,所以需要我們向後相容:
padding-bottom: constant(safe-area-inset-bottom); /* 相容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 相容 iOS >= 11.2 */
適配
1.設定網頁在可視視窗的佈局方式使頁面完全覆蓋整個視窗
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
只有設定了 viewport-fit=cover,才能使用 env()。
2. 頁面主體內容限定在安全區域內
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
3. fixed 元素的適配
如果元素是fixed定位且bottom=0,那麼除了設定body的padding-bottom還不夠,還需要給它自身新增padding,因為它是相對於螢幕最底部定位的。
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
或者通過計算函式 calc 覆蓋原來高度:
{
height: calc(60px(假設值) + constant(safe-area-inset-bottom));
height: calc(60px(假設值) + env(safe-area-inset-bottom));
}
注意,這個方案需要吸底條必須是有背景色的,因為擴充套件的部分背景是跟隨外容器的,否則出現鏤空情況。
如果元素是fixed定位且bottom不等於0,則只調整位置就可以了,增加margin-bottom或者改變bottom。