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

2026/8/12 11:00:55 拓冰建站浏览量

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

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

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

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

1.新建blank.vue页面：

<template><!-- 此空白页面用于处理视频全屏退出后页面样式混乱 --><view></view>
</template><script>export default {data() {return {}},methods: {},onLoad() {// #ifdef APP-PLUSplus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏// #endifsetTimeout(() => {uni.navigateBack({delta: 1})}, 30)},}
</script><style></style>

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

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

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

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

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

5.效果:

建站实战干货

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