一樣簡單iPhoneX取消了物理按鈕并將其更改為底部的小黑條。這種變化導(dǎo)致網(wǎng)頁具有更尷尬的屏幕適應(yīng)問題。對于網(wǎng)頁，頂級（劉海）改編問題瀏覽器已經(jīng)處理完畢，所以我們只需要注意底部和小黑條的適應(yīng)問題（即常見的底部導(dǎo)航，回到頂部等）。固定在元素的底部）。

作者：匿名來源：Aotu.io | 2017-11-28 15: 29 mobile favorites分享CTO訓(xùn)練營結(jié)束| 12月3日至5日，深圳，是時(shí)候成為一名優(yōu)秀的技術(shù)經(jīng)理了

iPhoneX取消了物理按鈕并將其更改為底部的小黑條。這種變化導(dǎo)致網(wǎng)頁具有更尷尬的屏幕適應(yīng)問題。對于網(wǎng)頁，頂級（劉海）改編問題瀏覽器已經(jīng)處理完畢，所以我們只需要注意底部和小黑條的適應(yīng)問題（即常見的底部導(dǎo)航，回到頂部等）。固定在元素的底部）。

作者咨詢了一些官方文件，結(jié)合實(shí)際項(xiàng)目的一些處理經(jīng)驗(yàn)，編制了一個(gè)簡單的適應(yīng)計(jì)劃與大家分享，希望對大家有所幫助，以下是處理前后的效果：

在適應(yīng)之前需要了解的幾個(gè)新知識

安全區(qū)域

安全區(qū)域是指一系列可見窗口。安全區(qū)域中的內(nèi)容不受角落，傳感器外殼和家庭指示燈的影響。藍(lán)色區(qū)域如下：

換句話說，我們必須適應(yīng)，我們必須確保頁面可見，可操作區(qū)域在安全區(qū)域。

有關(guān)更多詳細(xì)信息，請參閱文檔：人機(jī)界面指南 - iPhoneX

視口配合

iOS11中的新功能，為了使iPhoneX適應(yīng)現(xiàn)有視口元標(biāo)記的擴(kuò)展，要在可見窗口中設(shè)置網(wǎng)頁的布局，可以設(shè)置三個(gè)值：

包含:可視窗口完全包含網(wǎng)頁內(nèi)容（左）

封面：網(wǎng)頁內(nèi)容完全覆蓋可見窗口（右）

自動：默認(rèn)值，與包含

注意：沒有添加擴(kuò)展名的網(wǎng)頁的默認(rèn)性能是viewport-fit=contains。要適應(yīng)iPhoneX，您必須設(shè)置viewport-fit=cover，這是適應(yīng)的關(guān)鍵步驟。

有關(guān)更詳細(xì)的說明，請參閱文檔：viewport-fit-descriptor

常數(shù)功能

iOS11中的新功能，Webkit的CSS功能，用于設(shè)置安全區(qū)域和邊界之間的距離。有四個(gè)預(yù)定義變量：

Safe-area-inset-left：距安全區(qū)左邊緣的距離

Safe-area-inset-right：從安全區(qū)域到右邊緣的距離

安全區(qū)域嵌入式頂部：距安全區(qū)域頂部的距離

安全區(qū)域插入底部：距安全區(qū)域底部的距離

這里我們只需要注意safe-area-inset-bottom變量，因?yàn)樗鼘?yīng)于小黑條的高度（水平和垂直屏幕時(shí)的值不同）。

注意：當(dāng)viewport-fit=contains時(shí)，常量函數(shù)不起作用，必須與viewport-fit=cover一起使用。對于不支持常量的瀏覽器，瀏覽器將忽略它。

官方文檔提到env函數(shù)即將替換常量函數(shù)，并且作者尚未對其進(jìn)行測試。

有關(guān)更多詳細(xì)信息，請參閱文檔：為iPhone X設(shè)計(jì)網(wǎng)站

如何適應(yīng)

在了解了上述知識點(diǎn)后，我們的適應(yīng)思路非常清晰。

第1步：在可視窗口中設(shè)置網(wǎng)頁的布局

添加了viweport-fit屬性以使頁面內(nèi)容完全覆蓋整個(gè)窗口：

< metaname='viewport'content='width=device-width，viewport-fit=cover'>

如前所述，只有在設(shè)置了viewport-fit=cover時(shí)才能使用常量函數(shù)。

第2步：頁面主體的內(nèi)容僅限于安全區(qū)域

根據(jù)實(shí)際頁面場景選擇該步驟。如果未設(shè)置該值，則可能存在小黑條遮擋頁面的最底部內(nèi)容的情況。

身體{

填充底部:常量（安全區(qū)域插入底部）;

}

第3步：修改固定元素

類型1：完全固定底部元素（底部=0），例如以下兩種情況：

您可以通過填充填充來擴(kuò)展高度：

{

填充底部:常量（安全區(qū)域插入底部）;

}

或者通過計(jì)算函數(shù)calc覆蓋原始高度：

{

高度:計(jì)算（60px（假設(shè)值）+常數(shù)（安全區(qū)域插入底部））;

}

請注意，此方案要求底部條帶必須具有背景顏色，因?yàn)楸尘暗难由觳糠质歉S外部容器，否則會發(fā)生挖空。

另一個(gè)選擇是添加一個(gè)新元素（一個(gè)空的顏色塊，主要用于小黑條的高度），然后吸收底部元素而不改變高度，只需要調(diào)整位置，如下所示：p>

{

保證金底部:常數(shù)（安全區(qū)域插入底部）;

}

空顏色塊：

{

位置:已修復(fù);

底部: 0;

寬度: 100％;

高度:常數(shù)（安全區(qū)域插入底部）;

背景色: fff;

}

類型2：固定的非完整底部元素（bottom≠ 0），例如“回到頂部”，“側(cè)面廣告”等

就像這樣，需要向上調(diào)整頭寸，這只能通過保證金保證金來處理：

{

保證金底部:常數(shù)（安全區(qū)域插入底部）;

}

或者，您可以通過計(jì)算函數(shù)calc：

{

底部:計(jì)算（50px（假定值）+常數(shù)（安全區(qū)域插入底部））;

}

不要忘記使用@supports

寫在這里，我們已經(jīng)了解了兩種常見類型的固定元素自適應(yīng)方案，但不要忘記，一般我們只希望iPhoneX需要新的自適應(yīng)樣式，我們可以用@supports編寫樣式：

@supports（底部:常量（safe-area-inset-bottom））{

Div {

保證金底部:常數(shù)（安全區(qū)域插入底部）;

}

}

« U-Mail電子郵件營銷“私人定制”人格出版物 | 馬云：你的快樂對手很生氣，太極拳，經(jīng)營理念取決于它 »