uniapp微信小程序实现对H5的全屏适配(@莫成尘)

复制代码您将看到和一下截图一样的效果。我们将适配全屏至正常h5下的所以页面大小,您再此处将依然使用rpx作为开发单位。

uniapp全屏h5
uniapp正常h5和其他端

<template>
	<view class='pageBox'>
		<view class="wrap">
			name
		</view>
	</view>
</template>
<script>
	export default {
    
    
		data() {
    
    
			return{
    
    
				title:'title'
			}
		},
		methods:{
    
    
			
		},
		onload(){
    
    
			
		}	
	}
</script>
<style lang="scss">
	.pageBox{
    
    
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		.wrap{
    
    
			/* #ifdef H5 */ //仅仅在H5下生效  防止出现滚动条
			min-height: calc(100vh - 44px);
			/* #endif */
			/* #ifdef MP-WEIXIN */ //仅仅在wx下生效
			min-height: calc(100vh - 0px);
			/* #endif */
			width: 92%;
		}
	}
</style>

	//在app.vue中 添加对最大宽度的限制
	body{
    
    
		display: flex;
		justify-content: center;
		>uni-app{
    
    
			max-width: 1190px;
			background: red;
		}
	}

其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。

猜你喜欢

转载自blog.csdn.net/weixin_47821281/article/details/114086933