iPhoneX 適配H5頁面的解決方案


由於在iPhonex在狀態欄增加了24px的高度,對於通欄banner規范的內容區域會有遮擋情況。

解決方案:在頁面通欄banner頂部增加一層高度44px的黑色適配層,整個頁面往下挪44px,這種做法雖然不符合蘋果設計規范,可以先以這種方式處理,后續再優化banner設計展現。

對於底部footer可以增加34px的適配層,將操作欄上移34px,顏色可以自定義。

如果不這樣設置 可以使用蘋果官方提供的meta標簽

viewport-fit:有三個值contain:可視窗口完全包含網頁內容;cover:網頁內容完全覆蓋可視窗口;auto:同contain;

通過給頁面設置viewport-fit=cover,可以將頁面的布局延伸到頁面頂部和底部

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM