1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 解決新款iPhone X上方畸零空間蓋版與網頁滿版CSS3設定

解決新款iPhone X上方畸零空間蓋版與網頁滿版CSS3設定

2017/09/19

梅問題-解決iPhone X上方畸零空間,與滿版設定的CSS新屬性

  此次的iPhone新機,台灣也排在第一波的名單中,雖然目前實機還沒拿到,在網路上就引起熱烈的討論,由其是它上方的畸零空間,在瀏覽網頁時,還真是一大災難,而Apple早己知道會有這狀況發生,所以在預設的情況下,網頁會上下齊頭,就像平常使用有邊框的iPhone一樣,除非是遇到滿版的網頁,才會發生網頁中的畫面,被上方的畸零空間給蓋掉,為了解決這問題,Apple也率先的運用到@viewport的新值viewport-fit。


  而這個新屬性,早在兩年前時,就已被定義出來,而當初在定義這新屬性時,主要是為了圓形智慧型手錶的螢幕上呈現網頁所需的,但沒想到現在卻是運用在iPhone的新機X上,當把網頁設為滿版時,另一個問題就是邊界的部分,由於iPhone X上方的畸零空間會蓋住下方的畫面,為了解決這個問題,Apple也提供了一組新的CSS屬性,來自動抓取螢幕的邊界,雖然目前還沒拿到實機,但可透過早上梅干所分享的Xcode中的iPhone X模擬器來進行測試,因此在還沒拿到iPhone X時,可先提前來了解一下,未來iPhone X的手機網頁要如何來設定。


由於新版iPhone X是無邊框,因此上方會顯示會顯示訊號以及一些硬體裝置,而下方則是解鎖的Home鍵,因此為了考量安全範圍,在沒作任何設定時,網頁載入時,會自動上下留白,就像以往iPhone在瀏覽網頁一樣。

梅問題-解決iPhone X上方畸零空間,與滿版設定的CSS新屬性


@viewport新值viewport-fit
所以這時可透過@viewport的新屬性「viewport-fit」,當把這屬性加入後,就會看到,底部的色塊變成滿版了,雖然滿版,但會發現網頁會被新版iPhone X的畸零空間給擋住。

<meta name="viewport" content="viewport-fit=cover">

梅問題-解決iPhone X上方畸零空間,與滿版設定的CSS新屬性


safe-area-inset-*安全邊界
接著這邊有四個屬性,可以用來解決手可視的安全邊界,分別是safe-area-inset-top、safe-area-inset-right、safe-area-inset-left、safe-area-inset-bottom。

梅問題-解決iPhone X上方畸零空間,與滿版設定的CSS新屬性


所以就在區塊中加入安全邊界的屬性,就可解決被蓋版的問題啦!

padding:
 constant(safe-area-inset-top)
 constant(safe-area-inset-right)
 constant(safe-area-inset-bottom)
 constant(safe-area-inset-left);

梅問題-解決iPhone X上方畸零空間,與滿版設定的CSS新屬性