uni-app 安卓部分手机右滑两次退出APP后显示错位
uni-app 安卓部分手机右滑两次退出APP后显示错位
操作步骤：
- 打开APP，右滑关闭后再次打开页面错位
预期结果：
- 再次打开APP后应该也是全屏展示
实际结果：
- 打开APP，右滑关闭后再次打开页面错位
bug描述：
页面用rpx，如第一张图，第一次打开页面是正常显示的，我用红色边框表示内容全屏正常展示，但是用右滑关闭APP后（现在部份安卓机有右滑功能，图中左边突出的黑色东西是右滑的效果，第二张图），再次打开APP红色框就缩小了（第三张图），整个页面其它的布局也全都缩小，这里是用750rpx自适应页面的，整个页面宽度都是rpx设置。 另外如果不关闭APP只是最小化，再次打开页面则变大了（第四张图）
图片
| 项目属性 | 值 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | Windows 7 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.1.2 |
| 手机系统 | Android |
| 手机系统版本号 | Android 10 |
| 手机厂商 | 小米 |
| 手机机型 | 小米Redmi 9 |
| 页面类型 | nvue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于uni-app 安卓部分手机右滑两次退出APP后显示错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html
5 回复
<view class="box" style="width: 750rpx;border: 10rpx solid red;">
<view>
........
</view>
</view>
这个是页面最外层的，中间内容不影响出现BUG所以没贴出来，nvue页面
这是一个典型的屏幕尺寸变化导致的rpx适配问题。在部分安卓手机上，右滑退出APP或最小化后重新激活时，系统可能未正确触发uni-app的屏幕尺寸更新机制，导致rpx单位计算错误。
问题原因：
- 右滑退出或最小化APP后，系统可能改变了窗口尺寸或DPI设置
- uni-app的rpx系统未能及时获取到正确的屏幕宽度
- nvue页面在尺寸变化时可能未正确重新计算样式
解决方案：
- 监听屏幕尺寸变化
onShow() {
// 在页面显示时强制重新计算尺寸
this.$nextTick(() => {
// 触发页面重绘
})
}
-
使用px替代rpx 对于关键布局元素，考虑使用px单位或百分比布局，避免依赖rpx的动态计算。
-
检查manifest.json配置 确保已正确配置屏幕方向：
{
"app-plus": {
"screenOrientation": ["portrait-primary"]
}
}