CSS, 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新屬性