uni-app 进入页面设置横屏后退出 首次进入其他页面文字变大

uni-app 进入页面设置横屏后退出 首次进入其他页面文字变大

操作步骤：

  • onload 里面设置 plus.screen.lockOrientation(‘landscape-primary’);
  • onUnload 里面设置 plus.screen.lockOrientation(‘portrait-primary’);

预期结果：

  • 退出横屏页面再次进入新的竖屏页面时页面样式正常显示

实际结果：

  • 退出横屏页面再次进入新的竖屏页面时页面样式不正常，全部变很大

bug描述：

进入到一个页面设置横屏以后，退回将横屏取消回来页面是正常的，但是进入到一个新的页面，字体就会变很大，退出在重新进入，字体就正常了。也就是说，每次进入横屏页面，下次再打开新页面都会导致样式不对，在重新进入样式就正常了。

相关链接：

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本号 11.6
HBuilderX类型 正式
HBuilderX版本号 3.2.16
手机系统 iOS
手机系统版本号 iOS 15
手机厂商 苹果
手机机型 12
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 进入页面设置横屏后退出 首次进入其他页面文字变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

找了个解决方案，进入页面要延迟1300毫秒以后设置横屏，退出才不会出问题； 希望官网以后能优化下这个延迟时间

更多关于uni-app 进入页面设置横屏后退出 首次进入其他页面文字变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，请提供一个简易的demo，方便排查问题

https://ask.dcloud.net.cn/question/99716

这个问题是由于横竖屏切换时，Webview的CSS像素与物理像素比例计算异常导致的。在iOS平台上，当从横屏页面返回并进入新页面时，系统可能未正确重置视口缩放，导致字体和布局异常放大。

解决方案：

  1. 延迟设置竖屏：在onUnload中设置竖屏可能执行时机过晚，建议在onHide或beforeDestroy生命周期中设置：
onHide() {
  plus.screen.lockOrientation('portrait-primary');
}
  1. 添加视口重置：在受影响页面的onLoad中强制重置视口：
onLoad() {
  // 重置视口缩放
  const meta = document.querySelector('meta[name="viewport"]');
  if (meta) {
    meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
  }
}
  1. 使用CSS修复：在全局或页面CSS中添加：
/* 防止横竖屏切换导致的缩放问题 */
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
回到顶部