我不知道有多少Ki-Friends買了iPhone-x。對我來說，如果你真的花了將近10000元買了一部手機，我覺得沒有必要。此外，對於我們班來說，購買這種手機的功能是接近1萬元。嗯，只是為了炫耀嗎？沒必要。在iPhone的配置中，有很多東西我們不能使用。無論從價格還是成本來看，我認為你確實需要使用iPhone。購買7是最划算的。如上所述，它只代表個人觀點。

從上面的圖片中可以看出，這款手機仍然很漂亮，但是你知道如何將iPhone-x與前端網頁相適應嗎？讓我們分享今天。

PhoneX取消了物理按鈕，改為底部的一個小黑條。這一變化導致了網頁上的螢幕調整問題。對於網頁，頂部的自適應問題瀏覽器（劉海部分）已經被處理，所以我們只需要關注底部和小黑條的自適應問題（即常見的吸底導航、返回頂部和其他相對底部固定的定位元素）。

作者通過查閱一些官方檔案，結合一些實際專案的處理經驗，整理出一套簡單的適應方案，與大家分享，希望對大家有所幫助。以下是處理前後的結果：

在適應之前需要了解的幾個新知識

安全區域

安全區是指不受角落、感測器外殼和家庭指示器影響的可視視窗區域。藍色區域如下所示。

也就是說，如果我們想要很好地適應，我們必須確保頁面的視覺和操作區域在安全區域內。

參考檔案：人機介面指南-iPhoneX（https://developer.apple.com/ios/.-interface-./overview/iphone-x/）

Viewport擬合

利用iOS 11的新特性，為了適應iPhone X上現有視口元標記的擴充套件，蘋果可以設定三個值以在可視視窗中設定網頁的佈局：

Contain：可視視窗包含頁面的所有內容（左）

封面：頁面內容完全覆蓋了可視視窗（右）

Auto：預設值，與

小編建議加入這個群體：九六零+五零八+九二零群體中有數百人！你遇到的每個問題都會被交換！並且免費共享零基本介紹資訊網頁前端開發html，CSS介紹基本資訊集！這是一個學習和交流的好地方！還有一些程式設計師急於回答各種各樣的問題！很快就滿了。如果你想繼續，那就繼續！各種各樣的PDF等待您下載！都是免費的！所以小編在組裡等著你們一起來交流學習。

注意：不新增副檔名的頁面的預設效能是viewport-.=.。為了適應iPhone X，您必須設定viewport-.=.，這是適應的關鍵步驟。

有關詳細資訊，請參閱文件：viewport-.-descriptor

常量函式

iOS 11的新特性是Webkit的CSS功能，用於設定安全區域和邊界之間的距離。有四個預定義的變數：

安全區域插入左邊：安全區域與左邊界之間的距離

安全區域插入右邊：安全區域與右邊界之間的距離

安全區域插入頂部：安全區域與頂部邊界之間的距離

安全區域插入底部：安全區域與底部邊界之間的距離

這裡我們只需要關注安全區域插入底部變數，因為它對應於小黑條的高度（水平和垂直螢幕值不同）。

注意：當viewport-.=contain時，常量函式不起作用，必須與viewport-.=cover一起使用。對於不支援常數的瀏覽器，瀏覽器將忽略它。

官方檔案提到env函式將取代常量函式。作者已經測試過，它暫時不可用。

有關詳細資訊，請參閱文件：為iPhone X設計網站

如何配合

瞭解以上幾點知識，那麼我們適應這個思路就很清楚了。

步驟1：在可視視窗中設定網頁的佈局

新增viweport-fit屬性使得頁面的內容完全覆蓋整個視窗：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

如前所述，只有設定了viewport-.=.，才能使用常數函式。

步驟2：將頁面的主要內容限制為安全區域

根據實際頁面場景選擇此步驟。如果未設定此值，則小黑條可能遮擋頁面的底部內容。

body { padding-bottom: constant(safe-area-inset-bottom);}

步驟3：調整固定元素

型別1：固定完全底部吸收元件（.=0），例如以下兩種情況：

可以通過新增內邊緣填充物來擴充套件高度：

{ padding-bottom: constant(safe-area-inset-bottom);}

或者通過計算覆蓋原始高度的函式Calc：

{ height: calc(60px(假設值) + constant(safe-area-inset-bottom));}

注意，此方案要求底部條帶為背景色，因為背景的擴充套件部分跟隨外部容器，否則會出現中空。

另一種選擇是新增新元素（空色塊，主要用於小黑條高度佔用），然後吸下元素不能改變高度只需要調整位置，如下所示：

{ margin-bottom: constant(safe-area-inset-bottom);}

空色塊：

{ position: fixed; bottom: 0; width: 100%; height: constant(safe-area-inset-bottom); background-color: #fff;}

型別2：固定底部0元素，如“回到頂部”和“側邊廣告”等。

像這樣，位置需要向上調整，只能靠邊際來處理。

{ margin-bottom: constant(safe-area-inset-bottom);}

或者，可以通過計算函式calc來覆蓋原始底部值：

{ bottom: calc(50px(假設值) + constant(safe-area-inset-bottom));}

別忘了使用@.

到目前為止，我們已經瞭解了兩種常見的固定元素適配方案，但是別忘了，一般來說，我們只想向iPhone X新增新的適配樣式，可以使用@support樣式編寫它：Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation固定元素

@supports (bottom: constant(safe-area-inset-bottom)) { div { margin-bottom: constant(safe-area-inset-bottom); }}

寫在最後

以上方案僅供參考。作者認為，這一階段的改編雖然有些曲折，但至少是可以解決的。具體而言，根據頁面的實際場景，我們需要在不影響使用者體驗和操作的前提下不斷嘗試和探索，以實現更完美的適應。

以上就是今天的分享。如果你對此一無所知，你可以在後臺給我留言。稍後，我會在今天的頭條新聞裡做一個適合iPhone-x的視訊錄製和分享，從頭開始分享結尾，解釋細節，這樣你就可以更完整地理解它。對於許多前端零基礎的學生來說，今天分享的內容可能很難消化，但是還沒有。關係，就這麼辦。稍後，我將一個接一個地更新基金會。謝謝你的關注。