在全面屏的 iPhone X 上,不需要而外的代碼,Safari 可以很好的展示現(xiàn)有的網(wǎng)站。整個(gè)網(wǎng)站的內(nèi)容都會(huì)自動(dòng)地展示在一個(gè)“安全區(qū)域”內(nèi),并不會(huì)被四周的圓角或者“小劉海”遮擋住。
Safari 使用頁面的背景色(一般就是 <body> 或者 <html> 元素的 background-color)來填充周圍空出的區(qū)域,與頁面的其他部分保持協(xié)調(diào)。這種方式可以解決網(wǎng)站大部分的問題。
不過還有一些網(wǎng)站——尤其是那些有橫向貫穿的導(dǎo)航條的網(wǎng)站,像下面這樣的就需要做一點(diǎn)額外的工作,使得在這種新的顯示下繼續(xù)利用全面屏的優(yōu)勢(shì),且不顯得突兀。
我們需要有選擇地給那些包含重要信息的元素加上內(nèi)邊距,避免它們受到屏幕形狀的影響。這樣不但可以充分利用 iPhone X 擴(kuò)大的屏幕,也可以避免手機(jī)四個(gè)角、小劉海和退到主屏標(biāo)志的影響。iOS 11 的 WebKit 引入了一個(gè)新的 CSS 函數(shù)—— env(),還有四個(gè)預(yù)定義的環(huán)境變量。—— safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, 和 safe-area-inset-bottom。結(jié)合這兩個(gè)新東西,就可以在樣式中使用安全邊距。
在不支持 env() 函數(shù)的瀏覽器中,這條 CSS 規(guī)則會(huì)被忽略。因此,針對(duì)每個(gè)使用 env() 的地方,加一條 CSS 備用規(guī)則尤其重要。我們可以使用 Safari Technology Preview 新增的 CSS 函數(shù) min() 或 max() 來實(shí)現(xiàn)。這兩個(gè)函數(shù)都接受任意個(gè)數(shù)字,返回其中最小或者最大值。兩個(gè)函數(shù)都可以使用在 calc() 中,也可以互相嵌套,也允許在函數(shù)內(nèi)使用計(jì)算(就如 calc() 的那樣)。
手機(jī)處于豎屏狀態(tài)時(shí), env(safe-area-inset-left) 取值為 0px,因此 max()函數(shù)的取值為 12px。橫屏?xí)r, env(safe-area-inset-left) 因?yàn)樾⒑5拇嬖冢瑫?huì)比較大,max() 就會(huì)返回安全邊距,這樣就可以保證重要的內(nèi)容總是可見。