uni-app 三星手机高分辨率下页面错乱

在 uni-app 开发中，可能会遇到在三星等高分辨率手机上页面布局错乱的问题。这通常是由于屏幕密度（DPI）和分辨率的差异导致的。以下是一些可能的解决方案和调试方法：

1. 使用 rpx 单位

uni-app 推荐使用 rpx 作为响应式单位，它会根据屏幕宽度自动缩放。确保在布局中尽量使用 rpx 而不是 px，这样可以避免在高分辨率设备上出现布局错乱。

.container {
  width: 750rpx; /* 750rpx 等于屏幕宽度 */
  padding: 20rpx;
}

2. 检查 viewport 设置

确保在 pages.json 中正确配置了 viewport，尤其是 "rpxCalcMaxDeviceWidth" 和 "rpxCalcBaseDeviceWidth"。

{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 1440, // 最大设备宽度
    "rpxCalcBaseDeviceWidth": 750, // 基准设备宽度
    "rpxCalcIncludeWidth": 750     // 包含宽度
  }
}

3. 适配高分辨率屏幕

三星手机通常有较高的屏幕密度（如 480 DPI），可以通过以下方式适配：

• 使用 px 时，结合 window.devicePixelRatio 进行动态计算。
• 使用 uni.getSystemInfoSync() 获取设备信息，动态调整布局。

const systemInfo = uni.getSystemInfoSync();
const dpr = systemInfo.pixelRatio;
const screenWidth = systemInfo.screenWidth;
const screenHeight = systemInfo.screenHeight;

console.log(`Device Pixel Ratio: ${dpr}, Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);

4. 检查 CSS 样式

确保 CSS 样式没有写死宽度或高度，尤其是使用 px 单位时。可以通过以下方式改进：

• 使用百分比或 flex 布局。
• 避免固定宽高，使用 min-width、max-width 等属性。

.item {
  flex: 1;
  min-width: 200rpx;
  max-width: 300rpx;
}

5. 调试特定设备

使用 Chrome DevTools 的 Device Toolbar 模拟三星设备，检查布局问题。可以在 Chrome 中打开开发者工具（F12），选择相应的设备型号进行调试。

6. 检查第三方组件

如果使用了第三方组件库，确保这些组件支持高分辨率设备。可以检查组件的文档或联系开发者。

7. 处理图片资源

高分辨率设备需要更高清晰度的图片。可以使用 @2x 和 @3x 图片，或者使用 image 组件的 mode 属性适配不同分辨率。

<image src="/static/logo@2x.png" mode="widthFix"></image>