1、在或元素中指定與頁面的background-color一樣的顏色用來填充整個頁面。這樣頁面的安全區域和其餘部分混合在一起。這種方法對於只有**資訊的簡單頁面已經足夠。
但是對於一些有全屏導航或全屏自適應布局的頁面，這樣設定並不夠。需要2、3方法。
2、第乙個新特性是對現有viewport meta標籤的擴充套件，稱為viewport-fit，它提供對嵌入(insetting)行為的控制。在ios 11中可以使用viewport-fit。
viewport-fit的預設值是auto，上面看到的的效果就預設的嵌入行為。為了使該行為失效，並導致頁面顯示到螢幕的大小，你可以設定viewport-fit:cover來覆蓋。
3、設定安全區域（使用max(),當手機橫屏豎屏時都能正常設定安全區域。這個特性在ios 11不能使用）
@supports(padding: max(0px))
相容iphone x劉海的正確姿勢
在 ios 11 中我們可以使用viewport fit cover safe area inset 那麼是不是 ios11 以下就用不了這些了呢？是的，但你見過 iphone x 有 ios 11以下的嗎？所以我們可以愉快的搞下去。開始之前我們先了解什麼是 safe area，簡單的來說就是除了劉...
使用 css 適配 iphoneX 劉海屏
iphonex 劉海螢幕導致 h5 頁面不能正常的全屏顯示了，就需要對 頁面進行適配，下面就詳細說說如何適配。首先上一張適配之前的圖 可以看到頁面頂部被遮擋，底部貼著最下面 ios11 增加新特性，增加webkit 的 css 函式，css 預定義變數 四個預定義變數為設定安全區域和邊界的距離，如下...
iPhone X 的「劉海」正是蘋果的品牌象徵
以下內容由mockplus團隊翻譯整理，僅供學習交流，mockplus是更快更簡單的原型設計工具。在iphone x發布活動結束之後，關於其在螢幕頂端獨特的 劉海 設計，引起了不少人的討論。其實，這個 劉海 是為了將啟用face id的相機和感測器隱藏起來。但仍有許多人，特別是設計師紛紛表示這個 劉...