在 ios 11 中我們可以使用viewport-fit=cover+safe-area-inset-*。
那麼是不是 ios11 以下就用不了這些了呢？是的，但你見過 iphone x+ 有 ios 11以下的嗎？ 所以我們可以愉快的搞下去。
開始之前我們先了解什麼是 safe area，簡單的來說就是除了劉海和鬍子以外的區域為安全區域：
關於 viewport-fit
viewport-fit 有3個值：
contain: 可視視窗完全包含網頁內容（左圖）
cover：網頁內容完全覆蓋可視視窗（右圖）
auto：預設值，跟 contain 表現一致
關於 safe-area-inset-*
constant(safe-area-inset-top)：在viewport頂部的安全區域內設定量（css畫素）
constant(safe-area-inset-bottom)：在viewport底部的安全區域內設定量（css畫素）
constant(safe-area-inset-left)：在viewport左邊的安全區域內設定量（css畫素）
constant(safe-area-inset-right)：在viewport右邊的安全區域內設定量（css畫素）
簡單來說我們可以通過constant( )可以獲取到非安全邊距，再結合padding或margin來控制頁面元素避開非安全區域。 webkit在ios11中新增css functions: env( )替代constant( )，文件中推薦使用env( )，而 constant( ) 從safari techology preview 41 和ios11.2 beta開始會被棄用。在不支援env( )的瀏覽器中，會自動忽略這一樣式規則，不影響網頁正常的渲染。為了達到最大相容目的，我們可以 constant( ) 和 env( ) 同時使用。
.yourfooterclass
複製**
一、設定網頁在可視區域的布局方式
新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個視窗：
"viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
複製**
假設我們的底部按鈕高度是50px：
body
1、寫在前面的padding-bottom: 50px為了相容沒有底部鬍子的裝置，讓主體內容偏移出底部按鈕的高度，避免按鈕遮擋內容。
2、padding-bottom: calc(env(safe-area-inset-bottom) + 50px);計算底部非安全區域距離與底部按鈕高度之和 來做為padding-bottom值，如果裝置支援 env，那麼 calc 會計算出乙個合法的值，本句的優先順序則最高，會覆蓋前面的padding-bottom: 50px。否則 calc 會計算出乙個不合法的值，則本句宣告不會生效。這樣在不支援 env 裝置中也可以達到相容的目的。
目前到這，在橫屏場景下左側的內容就不會被劉海遮擋住了
三、底部按鈕的處理
首先給底部按鈕乙個外層容器.btn-container，設定樣式時其中有幾點比較關鍵：
1、設定padding-bottom: env(safe-area-inset-bottom);增加乙個 padding 值，讓底部向外擴充套件乙個非安全區域的距離。
2、設定background: #fff讓整個.btn-container背景為白色（包括剛新增的 padding-bottom 的區域）這樣就可以遮擋住了底部內容。
3、設定box-sizing: content-box;，因為在通常情況下 css 在 reset 階段一般都設定了*這樣一來設定 padding 就不能向外擴充套件距離了，所以在這裡我們要把他改回content-box。
.btn-container
.btn
處理起來一切都顯得 簡潔優雅細膩。
相容iPhone X的「劉海」設計
1 在或元素中指定與頁面的background color一樣的顏色用來填充整個頁面。這樣頁面的安全區域和其餘部分混合在一起。這種方法對於只有 資訊的簡單頁面已經足夠。但是對於一些有全屏導航或全屏自適應布局的頁面，這樣設定並不夠。需要2 3方法。2 第乙個新特性是對現有viewport meta標籤...
iPhone X 的「劉海」正是蘋果的品牌象徵
以下內容由mockplus團隊翻譯整理，僅供學習交流，mockplus是更快更簡單的原型設計工具。在iphone x發布活動結束之後，關於其在螢幕頂端獨特的 劉海 設計，引起了不少人的討論。其實，這個 劉海 是為了將啟用face id的相機和感測器隱藏起來。但仍有許多人，特別是設計師紛紛表示這個 劉...
iPhone X 的「劉海」正是蘋果的品牌象徵
以下內容由mockplus團隊翻譯整理，僅供學習交流，mockplus是更快更簡單的原型設計工具。在iphone x發布活動結束之後，關於其在螢幕頂端獨特的 劉海 設計，引起了不少人的討論。其實，這個 劉海 是為了將啟用face id的相機和感測器隱藏起來。但仍有許多人，特別是設計師紛紛表示這個 劉...