uni-app ios下 video组件全屏再返回后，其他界面的部分字体会变大

uni-app ios下 video组件全屏再返回后，其他界面的部分字体会变大

开发环境 版本号 项目创建方式
Mac macOS 11.2.3 HBuilderX

操作步骤：

  1. video 组件全屏
  2. 退出全屏
  3. 返回到上一个界面

预期结果：

界面字体显示正常

实际结果：

有时会出现部分字体放大

bug描述：

video 组件全屏后返回，其他页面的部分字体会变大

2 回复

请问解决了吗？

更多关于uni-app ios下 video组件全屏再返回后，其他界面的部分字体会变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 iOS WebView 兼容性问题。当 video 组件全屏时，系统会临时创建一个独立的渲染层，退出全屏后可能影响页面 CSS 解析，导致字体缩放异常。

解决方案：

  1. 强制重置字体大小
    在页面 onShow 生命周期中添加：

    page {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

  2. 禁用字体自动调整
    在 App.vue 的全局样式中加入：

    * {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

  3. 视频组件配置
    给 video 组件添加 webkit-playsinline 和 playsinline 属性：

    <video 
  :webkit-playsinline="true"
  :playsinline="true"
></video>

  4. 页面级修复
    在受影响页面的样式文件中添加：

    body {
  -webkit-text-size-adjust: 100% !important;
  transform: scale(1);
}
回到顶部