uniapp video视频全屏播放后退出，页面字体变大，样式混乱问题

FinelyYang2025-07-15 14:38

uniapp官方的说法是因为页面使用rpx，但是全屏和退出全屏自动计算屏幕尺寸不支持rpx，建议使用px。

但是因为uniapp端的开发都是使用rpx作为屏幕尺寸计算参数，不可能因为video全屏播放功能就整个全部修改，工作量大，耗时耗力。

所以就有了下面的解决方法。

我的方式是：通过创建空白页面过渡。

1.新建blank.vue页面：

javascript 复制代码

<template>
	<!-- 此空白页面用于处理视频全屏退出后页面样式混乱 -->
	<view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {},

		onLoad() {
			// #ifdef APP-PLUS
			plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
			plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
			// #endif
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 30)
		},
	}
</script>

<style>

</style>

2.video标签监听全屏事件：

javascript 复制代码

<video id="videoId" ref="playVideo" :src="encodeURI(getVideo(resourceId))" controls autoplay
			@timeupdate="updateTime" @play="playToVideo" @fullscreenchange="screenChange">
		</video>

method方法中监听退出全屏事件，如果退出，跳转上述空白页面。

javascript 复制代码

    methods: {
			screenChange(e) {
				//视频全屏退出后页面样式混乱，跳转空白页处理后再返回本页
				// #ifdef APP-PLUS
				if (!e.target.fullScreen) {
					uni.navigateTo({
						url: '/subpages/multimedia/blank',
						animationType: 'none',
						animationDuration: 0
					})
				}
				// #endif
			}
    }

4.在空白页面中切换为竖屏后再返回video所在页面。这时候rpx参数重新计算，不会污染页面样式。

5.效果: