uni-app 打了最新的自定义调试包后app界面变得很小

uni-app 打了最新的自定义调试包后app界面变得很小

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win11

HBuilderX类型：

正式

HBuilderX版本号：

4.15

手机系统：

iOS

手机系统版本号：

iOS 16

手机厂商：

苹果

手机机型：

iphone12 pro

页面类型：

vue

vue版本：

vue2

打包方式：

云端

项目创建方式：

HBuilderX

开发环境 版本号 项目创建方式
Windows win11 HBuilderX
HBuilderX 4.15

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

之前的自定义包打出来都是没问题的

image


更多关于uni-app 打了最新的自定义调试包后app界面变得很小的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

完全不知道为什么会变成这样，请问各位能提供点检查的思路吗

更多关于uni-app 打了最新的自定义调试包后app界面变得很小的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已解决

在 Uni-app 中，如果你在打了最新的自定义调试包后发现应用界面变得很小，可能是由于以下原因之一导致的：

1. DPR（设备像素比）问题

Uni-app 默认会根据设备的 DPR（设备像素比）自动缩放页面。如果你的自定义调试包没有正确处理 DPR，可能导致界面显示异常。

解决方法：

  • 在 manifest.json 中检查 app-plus 下的 dpr 配置，确保其与设备匹配。
{
  "app-plus": {
    "dpr": 1 // 根据设备调整，1 表示不缩放
  }
}

2. Viewport 设置问题

Uni-app 默认使用 viewport 来设置页面的缩放比例。如果 viewport 设置不正确，可能导致页面显示异常。

解决方法：

  • 在 pages.json 中检查 globalStyle 下的 viewport 配置，确保其正确。
{
  "globalStyle": {
    "viewport": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  }
}

3. CSS 单位问题

如果你在开发时使用了 px 单位，可能会导致在不同设备上显示不一致。建议使用 rpx 单位，它是 Uni-app 推荐的自适应单位。

解决方法：

  • 将 CSS 中的 px 单位替换为 rpx。
.container {
  width: 750rpx; /* 750rpx 等于屏幕宽度 */
}
回到顶部