移动端适配iphoneX、iPhone XS、iPhone XS Max、iPhone XR方法

使用mui框架的底部tab栏打包后在iphoneX、iPhone XS、iPhone XS Max、iPhone XR上展示出现问题,底部会被遮挡大半。

效果如下图:

移动端适配iphoneX、iPhone XS、iPhone XS Max、iPhone XR方法_第1张图片

解决方案:获取屏幕大小来写不同的初始化参数

下面是代码:

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

 

你可能感兴趣的:(个人笔记)