运行环境显示异常修复实战案例

问题背景

上周接到客户反馈，说他们刚部署的内部管理系统在部分员工电脑上打开时，页面布局错乱，字体发虚，甚至有些按钮根本点不了。一开始以为是浏览器兼容问题，可排查一圈发现，大家用的都是最新版 Chrome，系统也都是 Win10 以上，按理说不该出这种基础问题。

深入一查，真正的原因浮出水面——运行环境显示异常。

定位问题：不是前端锅

前端同事第一反应是“样式被覆盖了”或者“JS 报错了”，但本地调试完全正常。把打包文件下载到出问题的机器上单独打开，问题依旧。说明不是接口或逻辑的问题，而是环境层面的渲染差异。

我们注意到，出问题的机器都有一个共同点：屏幕分辨率高（2K 以上），且设置了系统级缩放（比如 125% 或 150%）。这时候浏览器的 viewport 计算就会出现偏差，CSS 中写的像素值和实际渲染尺寸对不上，导致布局溢出、点击区域偏移。

修复方案：从 meta 入手

问题出在设备像素比（devicePixelRatio）和视口设置不匹配。解决方案是在页面头部强制规范视口行为：

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

这行 meta 标签的作用是告诉浏览器：别自作聪明缩放，按设备宽度原样展示，初始和最大缩放都是 1.0。

加上之后，高分屏下的显示恢复正常，按钮也能点了。但还没完——有些用户依然反映字体模糊。

补充处理：CSS 层面适配

进一步分析发现，模糊是因为某些元素用了 transform: scale() 来做适配，结果在高 DPI 下产生了亚像素渲染。我们改用 rem + 媒体查询来做响应式布局：

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  body {
    font-size: 16px;
  }
  .btn {
    padding: 8px 12px;
    border-radius: 4px;
  }
}

同时，在 JS 中动态检测 devicePixelRatio，对 canvas 或截图类功能做倍率补偿：

const dpr = window.devicePixelRatio || 1;
const canvas = document.getElementById('output');
const ctx = canvas.getContext('2d');
canvas.width = 300 * dpr;
canvas.height = 200 * dpr;
canvas.style.width = '300px';
ctx.scale(dpr, dpr);

上线后效果

更新版本推送到所有终端后，之前报错的机器全部恢复正常。特别是财务部那几台新配的 27 寸 4K 显示器，终于不再显示“挤成一团”的表单了。

这次问题也提醒我们：软件交付不能只看功能通不通，运行环境的细节往往决定用户体验的成败。尤其是企业内部系统，终端设备五花八门，提前做好高分屏、多 DPI 的适配，能省下不少售后时间。