使用mui框架的底部tab欄打包後在iphoneX、iPhone XS、iPhone XS Max、iPhone XR上展示出現問題,底部會被遮擋大半。
效果如下圖:
解決方案:獲取屏幕大小來寫不同的初始化參數
下面是代碼:
if (/iphone/gi.test(navigator.userAgent) && (screen.height == 896 && screen.width == 414)) {
// iPhone XS Max iPhone XR
mui.init({
swipeBack: false, //啓用右滑關閉功能,
keyEventBind: {
backbutton: false //關閉back按鍵監聽
},
subpages: [ //首先加載首頁
{
url: 'page/chat/chat.html',
id: 'chat',
styles: {
top: '0px',
bottom: '95px'
}
}
],
preloadPages: [ //預加載其他頁面
{
url: 'page/location/location.html',
id: 'location',
styles: {
top: '0px',
bottom: '95px'
}
},
{
url: 'page/search/search.html',
id: 'search',
styles: {
top: '0px',
bottom: '95px'
}
},
{
url: 'page/more/more.html',
id: 'more',
styles: {
top: '0px',
bottom: '95px'
}
}
],
});
} else if (/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)) {
// iPhone X
mui.init({
swipeBack: false, //啓用右滑關閉功能,
keyEventBind: {
backbutton: false //關閉back按鍵監聽
},
subpages: [ //首先加載首頁
{
url: 'page/chat/chat.html',
id: 'chat',
styles: {
top: '0px',
bottom: '90px'
}
}
],
preloadPages: [ //預加載其他頁面
{
url: 'page/location/location.html',
id: 'location',
styles: {
top: '0px',
bottom: '90px'
}
},
{
url: 'page/search/search.html',
id: 'search',
styles: {
top: '0px',
bottom: '90px'
}
},
{
url: 'page/more/more.html',
id: 'more',
styles: {
top: '0px',
bottom: '90px'
}
}
],
});
} else {
// 正常機型
mui.init({
swipeBack: false, //啓用右滑關閉功能,
keyEventBind: {
backbutton: false //關閉back按鍵監聽
},
subpages: [ //首先加載首頁
{
url: 'page/chat/chat.html',
id: 'chat',
styles: {
top: '0px',
bottom: '60px'
}
}
],
preloadPages: [ //預加載其他頁面
{
url: 'page/location/location.html',
id: 'location',
styles: {
top: '0px',
bottom: '60px'
}
},
{
url: 'page/search/search.html',
id: 'search',
styles: {
top: '0px',
bottom: '60px'
}
},
{
url: 'page/more/more.html',
id: 'more',
styles: {
top: '0px',
bottom: '60px'
}
}
],
});
}