uni-app HBuilderX在高分辨率屏幕出现弹窗字体过小

在 uni-app 中使用 HBuilderX 开发时，如果遇到在高分辨率屏幕上弹窗字体过小的问题，通常是由于屏幕像素密度（DPI）较高导致的。为了适配高分辨率屏幕，可以采取以下几种解决方案：

1. 使用 rpx 单位

rpx 是 uni-app 提供的一种相对单位，可以根据屏幕宽度进行自适应。1rpx 等于屏幕宽度的 1/750。使用 rpx 单位可以让字体在不同分辨率的屏幕上显示合适的大小。

<view style="font-size: 28rpx;">这是一个弹窗内容</view>

2. 使用 rem 单位

rem 是相对于根元素（html）字体大小的单位。你可以通过设置根元素的字体大小来适配不同分辨率的屏幕。

// 在 App.vue 中设置根元素字体大小
document.documentElement.style.fontSize = window.innerWidth / 750 * 100 + 'px';

然后在样式文件中使用 rem 单位：

.popup-content {
  font-size: 0.28rem; /* 相当于 28px */
}

3. 使用 px 单位并结合媒体查询

你可以使用 px 单位，并通过媒体查询来适配不同分辨率的屏幕。

/* 默认字体大小 */
.popup-content {
  font-size: 14px;
}

/* 高分辨率屏幕适配 */
@media only screen and (min-device-pixel-ratio: 2) {
  .popup-content {
    font-size: 28px;
  }
}

4. 动态计算字体大小

你可以在 JavaScript 中动态计算字体大小，根据屏幕的宽度或高度来设置字体大小。

// 在页面或组件中动态设置字体大小
const fontSize = window.innerWidth / 750 * 28; // 假设 750 是设计稿宽度
document.querySelector('.popup-content').style.fontSize = fontSize + 'px';

5. 使用 uni.getSystemInfoSync() 获取设备信息

uni-app 提供了 uni.getSystemInfoSync() 方法，可以获取设备的屏幕信息，根据这些信息动态调整字体大小。

const systemInfo = uni.getSystemInfoSync();
const fontSize = systemInfo.windowWidth / 750 * 28; // 假设 750 是设计稿宽度
document.querySelector('.popup-content').style.fontSize = fontSize + 'px';

6. 使用 scale 缩放

如果你不想修改字体大小，可以考虑使用 transform: scale() 来缩放整个弹窗内容。

.popup-content {
  transform: scale(2); /* 根据实际情况调整缩放比例 */
  transform-origin: top left;
}