使用env(dpr)做移动端适配时，为什么图标在不同手机显示比例不一致？

这个问题主要是env(dpr)在不同设备上的表现不一致导致的。env(dpr)是系统级的环境变量，依赖于设备和浏览器的实现，而各个厂商对dpr的处理确实存在差异，尤其是苹果设备。

从后端角度看，虽然这不是服务端的问题，但可以给你一个实际的解决方案。建议你放弃直接使用env(dpr)，而是采用更可靠的动态计算方式。可以在App启动时通过uni.getSystemInfoSync()获取设备的pixelRatio，然后根据这个值来设置根字体大小，配合rem单位使用。

具体做法是这样的：首先在app.vue的onLaunch生命周期里获取设备信息，代码大概是这样：

const systemInfo = uni.getSystemInfoSync()

const dpr = systemInfo.pixelRatio

const scale = 1 / dpr



// 动态设置根字体大小

const baseFontSize = 100 * scale // 假设设计稿是750px宽度

document.documentElement.style.fontSize = baseFontSize + 'px'

然后把你的meta标签简化成这样：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

记得让你的UI设计师提供一个基准的设计稿尺寸，比如750px，然后所有元素都用rem单位来写样式。比如设计稿上32px的图标，就写成32 / 100 rem。

这样做有几个好处：一是避免了env(dpr)的兼容性问题，二是通过动态计算保证了不同设备的一致性，三是rem方案在移动端已经非常成熟，基本不会出幺蛾子。

说个实在话，移动端适配从来就没有完美的解决方案，但我们可以通过这种动态计算加rem的方式，把坑降到最小。我之前做过几个类似项目，这种方式在iOS和主流安卓机上表现都很稳定。

env(dpr) 这个东西其实有点坑，虽然它理论上能帮你获取设备的像素比，但实际使用中兼容性并不理想，尤其是不同厂商对这个变量的支持程度不一样。你遇到的问题本质上是 env(dpr) 的值在不同设备上获取不一致，甚至有些设备根本不支持这个变量，导致 initial-scale 的计算结果偏差。

先说解决方案：建议放弃直接用 env(dpr)，换成通过 JS 动态计算并设置 viewport 的方式。可以用 uni-app 提供的 uni.getSystemInfoSync() 获取设备的 pixelRatio（也就是 DPR），然后手动拼接 meta 标签或者动态调整缩放比例。

代码可以这么写：

const systemInfo = uni.getSystemInfoSync();

const dpr = systemInfo.pixelRatio || 2; // 如果拿不到 DPR，默认用 2

const scale = 1 / dpr;



const meta = document.createElement('meta');

meta.name = 'viewport';

meta.content = width=device-width, initial-scale=${scale}, minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no;

document.head.appendChild(meta);

这样做的好处是你可以确保每个设备都能拿到正确的 DPR 值，而不用担心 env(dpr) 的兼容性问题。

另外，关于 rem 单位的使用，确实可以配合起来解决图标适配的问题。你可以通过动态设置 html 的 font-size 来统一单位基准，比如根据屏幕宽度设置一个基础值：

function setRem() {

    const width = document.documentElement.clientWidth || 375; // 默认 375 是 iPhone6 的宽度

    const baseSize = width / 10; // 把屏幕分成 10 份，1rem = 屏幕宽度的 1/10

    document.documentElement.style.fontSize = baseSize + 'px';

}

setRem();

window.addEventListener('resize', setRem);

这样，你的图标大小可以用 rem 来定义，结合上面动态设置 viewport 的方法，基本能解决大部分机型的适配问题。

最后吐槽一句，移动端适配这玩意真是个无底洞，不同厂商、不同机型总能给你整点意外惊喜。不过只要把 DPR 和 rem 配合好，基本上就能应付绝大多数场景了。