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

叁歲伎倆 2022-11-02 13:20 526阅读 0赞

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

![uniapp全屏h5][uniapp_h5]  
![uniapp正常h5和其他端][uniapp_h5 1]

<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的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。

[uniapp_h5]: /images/20221024/e2ca4bfc9ac1428e9018380dbe8ceab0.png
[uniapp_h5 1]: /images/20221024/519da8270fa849ae97cfdd218d87c2da.png

发表评论取消回复

表情：

评论列表（有 0 条评论，526人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5横竖屏适配代码，强制横屏

1、强制横屏代码，检测用户屏幕方向，竖屏时提示用户将屏幕翻转 <style> @media all and (orientation: portra

野性酷女/ 2023年06月13日 06:24/ 0 赞/ 16 阅读

相关微信小程序（四）屏幕适配

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。如图所示，同一个元素，在不同宽度的屏幕

红太狼/ 2023年02月22日 12:29/ 0 赞/ 23 阅读

相关在Uniapp微信小程序中解析富文本注意事项和正则@莫成尘

在uniapp中，某些详情页基本上都会使用富文本编辑，需要注意的样式主要是图片和表格等大小不匹配。如您满意请给莫成尘点个star 话不多说，直接上代码 c

浅浅的花香味﹌/ 2022年12月25日 02:58/ 0 赞/ 292 阅读

相关在Uniapp微信小程序中使用vantweapp@莫成尘

有时候我们发现，在uniapp中使用vantweapp的时候，vant官方的案例并不能帮助我们在uniapp中使用vant。如您满意请给莫成尘点个star（以下链接点

布满荆棘的人生/ 2022年12月18日 07:57/ 0 赞/ 302 阅读

相关 Uniapp微信小程序存储/获取本地缓存数据@莫成尘

先看代码，您将看到以下效果，复制使用即可，以下代码均可复制粘贴使用。如您满意请给莫成尘点个Fabulous 如果同步存储不到接口数据可以尝试使用异步

「爱情、让人受尽委屈。」/ 2022年12月14日 13:52/ 0 赞/ 699 阅读

相关 Uniapp微信小程序一套拿来即用的微信授权登陆流程@莫成尘

先看代码，您将看到以下效果，复制使用即可，部分地方需要修改，已备注。如您满意请给莫成尘点个Fabulous ![uniapp微信小程序登陆][uniapp]

我不是女神ヾ/ 2022年12月14日 12:19/ 0 赞/ 430 阅读

相关微信小程序富文本适配

超好用的插件：mp-html [开发历程看这][Link 1] [文档和使用方法看这][Link 2] 就用它用它，超好用！ [Link 1]: https:/

女爷i/ 2022年11月15日 15:59/ 0 赞/ 237 阅读

相关 uniapp微信小程序实现对H5的全屏适配（@莫成尘）

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

叁歲伎倆/ 2022年11月02日 13:20/ 0 赞/ 527 阅读

相关 uniapp微信小程序实现对地图多点或单点标记（@莫成尘）

先看代码，复制使用即可。您将看到以下效果： ![版权属于莫成尘][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

浅浅的花香味﹌/ 2022年10月31日 12:28/ 0 赞/ 646 阅读

相关小程序适配全面屏机型

应用场景手机适配思路分析 1：首选需要判断是否是全面屏手机 2：如果是全面屏手机，则改变响应的样式代码实现 1:在全

﹏ヽ暗。殇╰゛Y/ 2021年08月29日 19:54/ 0 赞/ 466 阅读