移動端適配iphoneX、iPhone XS、iPhone XS Max、iPhone XR方法

使用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'
				}
			}
		],
	});
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章