蘋果公司（Apple）的發布會也開完了，新產品也將登陸了。估計很多開發人員看到iPhone X的設備是要崩潰了，特別對於前端開發人員更是如此。
iPhone X的屏幕覆蓋了整個手機的屏幕，為相機和其他各部件留出了一個空間。結果是屏幕設計出現了一些尷尬的情況。比如將網站限制在一個“安全區域”。而在屏幕上的安全區域中，造成網站左邊或右邊有空白區域。
很多像我這樣的前端開始在考慮，這個蛋疼的東西怎么處理。而且項目中肯定要考慮這個設備的處理方式。值得慶幸的是，有兩個小技巧或許可以幫助我們。
background-color
正如上圖所示，左右（或頂、底部）留有空白的安全區域。這個時候，如果你的網站是單一的純色做為背景，那么最好最簡單的解決方案就是在你的body設置一個background-color。為了安全起見，建議同時在html和body都設置background-color。這個時候，上面的網站看到的效果是這樣的：
雖然沒有白條，但空出了不少的區域。眾所周知，在移動動終端，每一點空間都是非常值錢的，不容我們這樣浪費。就算是你的Boss允許你這么做，那也有問題存在。如果你的網站或應用背景不是純色，是一個漸變，或者是一個圖像。此時又進入了蛋疼的階段。或許你會說，蛋蛋揉揉就不疼了。
viewport-fit
iOS11與早期的版本有個不同的地方，Webview內容將會尊重所謂的安全區域。這意味着，如果你有一個標題欄固定在頂部（position:fixed;top:0）。它將會在屏幕頂部下面的20px開始渲染。當你向下滾動時，它會移動到狀態欄的后面。當你向上滾動時，它會再次下降到狀態欄下面（在20px的間隙中，內容會透出，這是一個很尷尬的間隙。無法讓人接受）。
如果上面的視頻無法正常展示，可以點擊這里下載視頻，查看效果
如果你對設計追求到極致，無法忍受那樣的安全區域，或者說你使用漸變或圖像作為背景，那么background-color無法拯救你我。不過，在最新的iOS版本中，蘋果已經把viewport-fit增加到了CSS Round Display規范中。
viewport-fit可以設置可視窗口（Visual Viewport）的大小。在設備的物理屏幕上看到的初始布局視窗。在圓形屏幕上，當前屏幕上顯示的部分是圓形的，但是Viewport卻是矩形的。因此，根據Viewport的大小，頁面的某些部可能被剪切。
通過viewport-fit可以設置可視視窗的大小，也就是可以控制剪切區域。viewport-fit接受三個值：
auto：這個值不影響初始布局視窗，整個Web頁面是可視的。在視窗之外的UA繪制的是未定義的，它可能是畫布的背景色，或者是UA認為合適的其他東西contain：最初的布局視窗和視覺布局視窗被設置為最大的矩形。在Viewport之外的UA繪制的是未定義的，它可能是畫布的背景色，或者UA認為合適的其他東西cover：初始布局視窗和視覺布局視窗被設置為設備物理屏幕的限定矩形
當在非矩形顯示器上設置Viewport的邊界框（Viewport Bounding Box）大小時，必須考慮以下因素：
- 由於Viewport邊界框(Viewport Bounding Box)的面積大於顯示區域，導致了剪切區域
- 在Viewport邊界框和顯示區域之間的間隙
開發人員可以決定哪一個因素比較重要。如果必須保證Web頁面的任何部分都沒有隱藏，那么避免剪切比在Viewport的邊界框和屏幕的邊框之間有個間隙更為重要。如果開發者不想讓Web頁面在可讀性上變得很小，那么最好將viewport-fit設置為cover，並在考慮剪切部分時實顯示頁面。
理論都是較為空洞的，來看規范中提供的兩個小示例。
這個示例顯示了在圓形屏幕上通過viewport-fit來指定Viewport的邊界框的大小。當指定viewport-fit的屬性值為contain，將初始的Viewport應用於顯示的最大的矩形。
@viewport (viewport-fit: contain) { /* CSS for the rectangular design */ } 
當viewport-fit的值為cover時，初始的Viewport應用於受限的矩形：
@viewport { viewport-fit: cover; } @media (shape: round){ /* styles for the round design */ } @media (shape: rect){ /* styles for the rectangular design */ } 
有關於viewport-fit更詳細的介紹，可以查閱W3C規范文檔。
回到我們的課題中來。解決iPhone X的安全區域。這里我們也將使用viewport-fit屬性來解決。使用非常簡單，在項目的<head></head>之間添加一個<meta>標簽。在這個標簽中配置viewport-fit=cover。如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 添加了這個標簽之后，剛才的網站效果就變成了這樣：
因此，要將標題欄恢復到屏幕的頂部，就像在iOS10中一樣，在狀態欄的后面，你需要添加viewport-fit="cover"到你的viewport的meta標簽中。
當然如果你要覆蓋這個Viewport，你可能需要使用一些特技來避免隱藏的內容。
回到iPhone X中。很明顯，現在的設計需要一些手動調整來適應這個缺口，但是如何處理現在已經是開發人員和設計人員的事情了。這個時候估計開發和設計都在揉着自己的蛋蛋，怕碎了。
safe-area-inset-*
現在iPhone X的形狀不規則，其狀態欄的高不再是20px，而且在攝像頭和揚聲器的設置下，你的標題欄內容將會完全無法訪問到。需要注意的是，這也適用於固定在屏幕底部的頁腳，它將被麥克風阻塞。
幸運的是，蘋果添加了一種方法，將安全區域布局指南暴露給CSS。他們添加類似一個CSS的變量概念，叫作CSS constants。可以考慮這樣的CSS變量，這些變量是由系統設計的，不能被覆蓋。它們可以通過CSS的constant()函數來完成。這個函數已經向CSS工作組提出了標准化的建議。
constant()函數具有四個布局的值：
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像素）
在實際使用中，可以把這些值添加到margin或padding中，可以添加四個項，也可以只添加你所需要的。比如頂部或左側。
在上面的示例的網站上添加了以下的值：
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); 這完全解決了在菜單和社交媒體圖標上的問題。
來看一個示例
假設你有一個固定位置的標題欄，你的iOS10的CSS可能是這樣寫的：
header { position: fixed; top: 0; left: 0; right: 0; height: 44px; padding-top: 20px; /* Status bar height */ }為了自動調整iPhone X和其他iOS11設備，你可以在meta標簽的viewport中添加viewport-fit="cover"：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 然后通過CSS的constant()修改padding-top的值：
header { position: fixed; top: 0; left: 0; right: 0; height: 44px; /* Status bar height on iOS 10 */ padding-top: 20px; /* Status bar height on iOS 11+ */ padding-top: constant(safe-area-inset-top); }對於不知道如何解決constant()語法的舊設備來說，你可以做一個降級的處理。你可以使用CSS的calc()函數。也可以借用@supports來使用。
header { position: fixed; top: 0; left: 0; right: 0; height: 44px; /* Status bar height on iOS 10 */ padding-top: 20px; } @supports (constant(safe-area-inset-top)) { header { /* Status bar height on iOS 11+ */ padding-top: constant(safe-area-inset-top); } } 總結
文章根據不同的角度對iPhone X這個所謂的安全區域做的技術處理，而且這些手段都是使用CSS來完成。上面這些資料也是網上獲取，由於自己未有這方面的設備，不敢確保技術方案百分百的能解決這個問題。當然如果你有相關的設備，建議自己寫一個Demo測試一下。如果你有更好的方案，歡迎一起分享。
參考資料
- “The Notch” and CSS
- Understanding the WebView Viewport in iOS 11
- Removing the White Bars in Safari on iPhone X
著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
原文: https://www.w3cplus.com/css/the-notch-and-css.html © w3cplus.com著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
原文: https://www.w3cplus.com/css/the-notch-and-css.html © w3cplus.com著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
原文: https://www.w3cplus.com/css/the-notch-and-css.html © w3cplus.com