记录uniapp 高度铺满全屏的小技巧

杰瑞在哪

已于 2022-11-30 16:22:30 修改

阅读量1.3w

点赞数 13

文章标签： uni-app 前端 vue.js

于 2022-11-30 16:16:00 首次发布

本文链接：https://blog.csdn.net/qq_56930357/article/details/128116997

版权

在uniapp开发中遇到h5页面高度超出屏幕导致滚动问题，可通过在app.vue设置全局样式uni-page-body, html, body的高度为100%，并在需要全屏的页面最外层view应用.page类，设置高度100%来实现全屏铺满。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在uniapp中，高度使用heiht:100vh,h5的屏幕会多出一些高度，导致可以上下滑动

解决方式如下

在app.vue中设置一个公共样式

uni-page-body,html,body{  
            height: 100%;  
        }

在需要高度铺满全屏的页面的最外层的view绑定类名page，样式为

.page {
		height: 100%;
	}

就可以实现页面高度铺满全屏了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

杰瑞在哪

关注关注

13
点赞
踩
28

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp页面高度设置（铺满可视区域、顶部状态栏高度、底部导航栏高度）

m0_51431448的博客

01-10

1930

这里说几种在uniapp开发中，关于页面设置高度的几种情况。宽度就不说了哈，宽度设置百分比都会生效。首先我们要知道平时开发中，如果说没在uniapp做特殊处理，即正常情况下，所有的页面（.vue文件）中都是没有高度的（和vue一样），也就是说给最外层的的view标签设置高度为100%是没啥作用的，只要没内容高度依然是0。

记录uniapp 高度铺满全屏的小技巧（不用去设置position: fixed定位）

高桥留de博客

10-27

3319

uniapp页面设置全屏小技巧

3 条评论您还未登录，请先登录后发表或查看评论

unaipp竖屏占满屏幕

F2691898750的博客

02-15

3674

uniapp中如果直接在页面中使用css属性height：100%是无法生效的，究其原因，是因为其根元素不具有高度，那么找到了原因，便可以解决，解决方法为：需要在app.vue的文件中的里写上：这样就在页面根元素上设置了100%，然后任何页面需要占满屏幕高度，就直接设置height：100%即可生效。如果是需要初始内容为100%，或不确定后续是否有添加新内容，使用min-height：100%；或设置over竖屏占满可运用场景：APP首屏图、内容较少的登录注册及其他页面

基于uniapp的微信小程序入门+微信小程序横屏显示(全屏显示)

一颗大萝卜

02-13

980

基于uniapp的微信小程序开发应用，UI框架: uview , 图表: echart ,图表可以横屏显示

uniapp 高度铺满全屏

cunning_of_fox的博客

04-01

2058

获取到页面的高度像素,然后把这个获取到的值给到style内就可以达到高度铺满全屏的一个状态。在需要高度铺满全屏的页面的最外层的view绑定类名page，样式为。在app.vue中设置一个公共样式。如果觉得麻烦还有一个全局高度的。OK No怕普雷下课。

uniapp-设置全屏

请叫我欧皇！的博客

07-04

4254

需求：就是想要小程序不受限制，可以把图片或者文字全屏的展示，如下图。

uniapp 适配全面屏

qq_28641023的博客

06-27

3130

1、manifest.json 文件修改。2、部分页面设置全屏（登录页面）app-plus 下添加。

uniapp的小程序全屏高度自适应适用大部分的屏幕兼容问题

2401_83071040的博客

10-31

812

这个标签是用来滚动的，但是这个滚动一般配合弹性盒子布局有一定的局限性以下是比较完整的解决方案，基本适应绝大部分情况。

背景图片铺满全屏

02-16

html背景图片铺满全屏

uniapp video视频铺满容器，不显示控件

hyx_1225的博客

07-06

892

object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖。enable-progress-gesture：是否开启控制进度的手势，bool值。show-center-play-btn：是否显示视频中间的播放按钮，bool值。show-center-play-btn：是否显示视频中间的播放按钮，bool值。2、其他地方用代码控制视频播放暂停。1、video标签的属性。

使元素占满整个屏幕高度,修改swiper 圆点样式

03-29

一：微信小程序中使元素占满整个屏幕高度在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父元素...

uniapp下页面布局分析——占满父元素高度

lsjweiyi的博客

04-15

5095

因为不是专业前端，是在学习过程中，感觉这个页面布局是个大难点。虽然网上找找代码抄抄也能实现效果，但是下次遇到一个类似的问题，又是不会，又要花大量时间百度。还是得搞明白其中的基础知识，才能自己解决问题，并且把代码写的优雅点。其实还没完全搞懂，写文章记录下，方便以后查询，且写文章也能让自己滤清思路，对理解有很大的帮助。父元素高度首先，讲自己理解上的一个大坑：就是自己在.vue文件上新增一个根节点<view>，想让其占满整个屏幕剩余空间。设置其高度height:100%，但是发现没用： <

uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置

weixin_65363325的博客

06-03

2305

官网：https://ask.dcloud.net.cn/article/35564。

uni-app 学习：页面高度设置100%

最新发布

03-22

<think>好的，我现在需要解决用户在小程序中使用webview无法全屏显示的问题。用户提到的是小程序中的webview全屏设置，可能涉及到拉伸、遮挡状态栏或导航栏等问题。根据用户提供的引用资料，我需要整理出可行的解决方案。首先，用户引用了几个解决方案，其中提到通过设置webview的height和top值来调整布局，避免状态栏被遮挡。引用[2]和[3]都提到了使用getAppWebview和getSystemInfo这两个API来动态获取设备信息和调整webview的位置。这可能是因为webview默认铺满全屏，导致状态栏被覆盖，所以需要计算状态栏的高度，并设置webview的top值来避开状态栏区域。另外，引用[4]提到webview页面多层history返回的问题，但用户当前的问题是全屏显示，所以可能暂时不需要处理返回问题。不过需要注意在调整布局时是否会影响导航栏或返回按钮的功能。接下来，我需要将这些信息整合成一个步骤清晰的解决方案。首先需要获取状态栏的高度，然后调整webview的位置和尺寸。具体步骤可能包括： 1. 使用uni.getSystemInfo获取系统信息，包括状态栏高度。 2. 获取当前webview的实例，使用this.$scope.$getAppWebview()。 3. 设置webview的样式，将top设置为状态栏高度，height设置为屏幕高度减去状态栏高度，这样webview就不会遮挡状态栏。 4. 在样式中可能需要使用动态绑定，例如在uni-app中使用计算属性或内联样式来设置top和height的值。同时，用户提到的全屏拉伸问题，如引用[1]中的jessibuca直播流拉伸，可能需要检查webview内部的页面是否设置了正确的视口（viewport）或是否使用了响应式布局，避免内容被缩放或拉伸。可能需要在webview加载的页面中添加meta标签，如： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这样可以防止页面被放大或缩小，保持内容正确显示。另外，需要确保webview组件本身在页面中的布局正确，没有受到父容器样式的影响，例如父元素的padding或margin可能会影响webview的实际显示区域。可能需要将webview的容器设置为绝对定位，并正确计算其位置和尺寸。总结步骤： - 动态计算状态栏高度，调整webview的top和height。 - 检查webview内部页面的视口设置，防止内容缩放。 - 确保webview容器的样式正确，避免父容器的影响。在实现过程中，需要参考uni-app的文档，正确使用getAppWebview和getSystemInfo这两个API，并注意代码的兼容性和不同设备的适配问题。可能还需要处理横竖屏切换时的布局调整，但用户当前的问题可能主要集中在竖屏模式下。最后，验证解决方案是否有效，可以通过真机调试查看webview是否全屏显示且不遮挡状态栏，同时内容没有拉伸或缩放的问题。如果仍有问题，可能需要进一步检查CSS样式或调整计算高度时的参数。</think>### 小程序 Webview 全屏显示解决方案在小程序中使用 Webview 全屏显示时，常见问题包括**拉伸、遮挡状态栏/导航栏**或**内容缩放异常**。以下是分步解决方案： --- #### 1. **动态计算布局参数** 通过 `uni.getSystemInfo` 获取设备状态栏高度和屏幕尺寸，调整 Webview 的 `top` 和 `height`，避免遮挡状态栏。 **代码示例**： ```javascript // 获取系统信息 const systemInfo = uni.getSystemInfoSync(); const statusBarHeight = systemInfo.statusBarHeight || 0; // 获取当前 Webview 实例 const currentWebview = this.$scope.$getAppWebview(); const webview = currentWebview.children()[0]; // 获取页面中的 Webview 组件 // 设置 Webview 的位置和高度 webview.style.top = `${statusBarHeight}px`; webview.style.height = `${systemInfo.windowHeight - statusBarHeight}px`; ``` **说明**： - `statusBarHeight` 为状态栏高度，需根据实际设备动态获取[^2][^3]。 - `windowHeight` 是屏幕可用高度，减去状态栏高度后即为 Webview 的实际显示区域。 --- #### 2. **禁止页面缩放（Webview 内部设置）** 在 Webview 加载的 HTML 页面中，添加 **`<meta>` 视口标签**，强制禁止缩放，避免拉伸： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` **作用**：确保内容按设备宽度渲染，禁止用户手动缩放[^1]。 --- #### 3. **检查容器样式** 在 UniApp 的页面文件中，确保 Webview 的父容器**无内边距或外边距干扰**。示例： ```html <template> <view class="webview-container"> <web-view :src="url" :style="webviewStyle"></web-view> </view> </template> <style> .webview-container { position: absolute; width: 100%; height: 100%; overflow: hidden; } </style> ``` **关键点**： - 父容器使用绝对定位，确保 Webview 可覆盖整个屏幕。 - 通过 `webviewStyle` 动态绑定 `top` 和 `height`（参考步骤1）。 --- #### 4. **适配横竖屏切换（可选）** 若需支持横屏，监听屏幕旋转事件并重新计算尺寸： ```javascript // 监听屏幕旋转 uni.onWindowResize(() => { const systemInfo = uni.getSystemInfoSync(); webview.style.height = `${systemInfo.windowHeight - statusBarHeight}px`; }); ``` --- ### 常见问题排查 - **拉伸问题**：检查 Webview 内部页面是否设置了固定宽高，推荐使用百分比或弹性布局。 - **导航栏遮挡**：若导航栏未隐藏，需在 UniApp 页面配置中设置 `"navigationStyle": "custom"`。 - **调试技巧**：使用微信开发者工具的「远程调试」功能，直接调试 Webview 内部页面[^1][^4]。 ---