uni-app uni.getSystemInfoSync()的devicePixelRatio在web端异常

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app uni.getSystemInfoSync()的devicePixelRatio在web端异常

开发环境 版本号 项目创建方式
Windows Windows 10 x64 HBuilderX

示例代码：

<template>
<view class=" content">  
</view>  
</template>

<script>
export default {
data() {
return {}
},
onReady() {
let sys=uni.getSystemInfoSync();
console.log(sys);
}
}
</script>

<style lang="scss" scoped>
.content{
width: 100vw;
height: 100vh;
}
</style>

操作步骤：

最新版的uni-app直接新建一个页面，复制上面代码运行就行，

预期结果：

希望本地运行和打包后的一致

let sys=uni.getSystemInfoSync();
console.log(sys);

在pc端的浏览器 sys.devicePixelRatio=1;

实际结果：

实际结果是

let sys=uni.getSystemInfoSync();
console.log(sys);

在pc端的浏览器 sys.devicePixelRatio=2.5;

bug描述：

let sys=uni.getSystemInfoSync();  
console.log(sys);

在同一个浏览器中，pc端模式运行，这个方法在本地运行和打包后获取到的devicePixelRatio不一致，本地获取到的是2.5，打包后的是1，导致windowHeight和windowWidth差距较大，导致pc端的独立渲染的UI失效，设置的px失效，实际比设置的px变大，打包后的没有这个现象


Harmonyos Next教程
3 回复

感谢反馈，我测试一下。你也可以临时在 web 端使用条件编译 window.devicePixelRatio


经过我测试 vue3+web，分别在普通窗口模式下、模拟 iphone12pro 窗口下观察 devicePixelRatio 在 dev 和 build 的结果，结果相同，分别是 1 和 3，没有复现你到问题。

在处理 uni-app 中 uni.getSystemInfoSync() 方法的 devicePixelRatio 属性在 Web 端异常的问题时，首先需要了解 devicePixelRatio 的含义。devicePixelRatio 是指设备物理像素与CSS像素的比例，通常用于调整页面在不同设备上的显示效果。在移动设备上，这个值通常大于1，以支持高清显示；而在桌面端，这个值通常是1。

在 uni-app 中，uni.getSystemInfoSync() 方法用于同步获取系统信息，包括设备类型、屏幕大小、系统版本等。然而，由于Web端与原生端（如iOS、Android）的渲染机制不同，devicePixelRatio 在Web端的表现可能会有所不同，尤其是在一些特定的浏览器或模拟环境中。

以下是一个示例代码，展示了如何在 uni-app 中使用 uni.getSystemInfoSync() 获取 devicePixelRatio，并针对不同平台（Web端与原生端）进行处理：

// 获取系统信息
const systemInfo = uni.getSystemInfoSync();

// 获取 devicePixelRatio
const devicePixelRatio = systemInfo.devicePixelRatio;

// 判断平台类型
const platform = systemInfo.platform;

// 根据平台类型进行不同的处理
if (platform === 'h5') {
    // Web端处理
    console.log('Web端 devicePixelRatio:', devicePixelRatio);
    // 由于Web端 devicePixelRatio 可能异常，这里可以进行一些兼容性处理
    // 例如，可以根据 window.devicePixelRatio 重新设置
    const windowPixelRatio = window.devicePixelRatio || 1;
    console.log('使用 window.devicePixelRatio:', windowPixelRatio);
    // 根据 windowPixelRatio 调整页面样式或逻辑
} else {
    // 原生端处理
    console.log('原生端 devicePixelRatio:', devicePixelRatio);
    // 在原生端，通常可以直接使用 systemInfo.devicePixelRatio
}

// 示例：根据 devicePixelRatio 调整图片大小
const imageSize = 100 * devicePixelRatio; // 或者使用 windowPixelRatio，根据平台判断
console.log('调整后的图片大小:', imageSize);

在上述代码中，我们首先获取系统信息，然后根据平台类型（platform）判断是否为Web端。如果是Web端，我们额外检查了 window.devicePixelRatio，因为它在某些情况下可能更可靠。之后，我们根据 devicePixelRatio（或 window.devicePixelRatio）调整页面元素的大小或样式，以确保在不同设备上都能获得良好的显示效果。

这种方法提供了一种灵活的方式来处理 uni-app 中 devicePixelRatio 在Web端的异常问题，同时保持了代码的简洁性和可维护性。

回到顶部