移動端iphoneX的頂部+底部適配層(基於mui框架)


原文

 

①上個月打包好的app,出現底部不適配原因:app不適配iphoneX。

因為iphoneX去除Home按鍵指示器底部樣式缺失,該app不適配iphonex(ps:在查找了相關資料處理后,又重新打包審核)

解決方法:

manifest.json配置文件 ----> ‘代碼視圖’ ----> 'plus'下添加代碼(添加安全區域):

    "safearea":{
     
    "background":"#fff",
     
    "bottom":{
     
    "offset":"auto"
     
    }
     
    },

②在每個htML頁面中,加入

 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

實現全屏適配,這樣做就會使頭部樣式延申至劉海屏部分。

③每個頁面添加了公共的css樣式:

     /*兼容ihponeX樣式 start*/
     
            body {
     
              padding-top: constant(safe-area-inset-top);
     
            }
     
            .mui-bar.mui-bar-nav {
     
              top: constant(safe-area-inset-top);
     
            }
     
    /*兼容ihponeX樣式 end*/

 

目前未知constant是否只在iPhoneX中起作用,暫未測試過,但客戶沒再反應回來應該是解決了。
---------------------
作者:Joe爺
來源:CSDN
原文:https://blog.csdn.net/joeyoyoyo/article/details/86592148


免責聲明!

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



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