uni-app 视频退出全屏后,返回首页字体非预期变小

uni-app 视频退出全屏后,返回首页字体非预期变小

2 回复

产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请提供可稳定复现直接运行的完整示例(上传附件),方便我们快速排查问题哦。 【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

更多关于uni-app 视频退出全屏后,返回首页字体非预期变小的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的 CSS 样式污染问题。当视频全屏时,部分浏览器或 WebView 会修改全局的 font-sizezoom 属性,退出全屏后这些样式未被正确重置,导致页面整体缩放异常。

解决方案:

  1. 监听全屏状态变化:在 onHideonUnload 生命周期中,强制重置根节点的字体大小。

    onHide() {
      // 退出页面时重置字体
      if (uni.getSystemInfoSync().platform === 'android') {
        document.documentElement.style.fontSize = '16px';
        document.body.style.zoom = '1';
      }
    }
    
  2. 使用 CSS 隔离:将视频组件包裹在独立的 view 中,并添加 overflow: hiddenposition: absolute 限制样式影响范围。

  3. 针对 Android WebView 的修复:在 pages.json 中对应页面的 style 配置添加:

    "style": {
      "navigationBarTitleText": "页面标题",
      "app-plus": {
        "videoFullscreen": "manual"
      }
    }
回到顶部