由於在iPhonex在狀態欄增加了24px的高度,對於通欄banner規范的內容區域會有遮擋情況。
解決方案:在頁面通欄banner頂部增加一層高度44px的黑色適配層,整個頁面往下挪44px,這種做法雖然不符合蘋果設計規范,可以先以這種方式處理,后續再優化banner設計展現。
對於底部footer可以增加34px的適配層,將操作欄上移34px,顏色可以自定義。
如果不這樣設置 可以使用蘋果官方提供的meta標簽
viewport-fit:有三個值contain:可視窗口完全包含網頁內容;cover:網頁內容完全覆蓋可視窗口;auto:同contain;
通過給頁面設置viewport-fit=cover,可以將頁面的布局延伸到頁面頂部和底部