如何解决Windows系统下网站的屏幕缩放适配问题

你的问题核心是Windows的DPI缩放会让浏览器基于系统缩放比例放大页面渲染，单纯修改viewport的initial-scale往往因为浏览器的DPI适配机制失效。以下是几个可行的方案：

方案一：通过CSS Transform全局反向缩放 #

把整个页面内容包裹在一个根容器中，利用transform: scale()基于devicePixelRatio做反向缩放，抵消系统缩放的影响：

1. 先给页面加一个根容器：

<div id="page-root">
  <!-- 你的所有页面内容 -->
</div>

2. 加入JavaScript代码：

const rootContainer = document.getElementById('page-root');
const dpr = window.devicePixelRatio;
const scaleFactor = 1 / dpr;

// 应用反向缩放
rootContainer.style.transform = `scale(${scaleFactor})`;
// 设置缩放原点为左上角，避免偏移
rootContainer.style.transformOrigin = 'top left';
// 调整容器宽高，避免出现滚动条或空白
rootContainer.style.width = `${dpr * 100}%`;
rootContainer.style.height = `${dpr * 100}%`;
// 可选：禁用用户缩放
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, user-scalable=no');

注意事项：

• 表单控件（如输入框、按钮）可能存在兼容性问题，部分浏览器下焦点样式或交互会异常
• 鼠标事件的坐标会被transform影响，如果有需要处理坐标的逻辑，要通过event.getBoundingClientRect()转换
• 页面如果有固定定位元素，需要确保它们也在这个根容器内，否则会偏离预期位置

方案二：结合Viewport与Zoom属性（仅限Chrome/Edge） #

部分Chromium内核浏览器支持非标准的zoom属性，可以配合viewport设置：

const dpr = window.devicePixelRatio;
document.querySelector("meta[name=viewport]").setAttribute('content', `width=device-width, initial-scale=1.0`);
document.body.style.zoom = 1 / dpr;

这个方法比transform更简单，但zoom是浏览器私有属性，Firefox等浏览器不支持，通用性较差。

方案三：媒体查询针对性调整（适合局部适配） #

如果不想全局缩放，可以用CSS媒体查询针对不同的devicePixelRatio调整元素尺寸：

/* 125%缩放（dpr=1.25） */
@media screen and (min-device-pixel-ratio: 1.25) and (max-device-pixel-ratio: 1.49) {
  body {
    font-size: 0.8em;
  }
  .container {
    width: 80%;
  }
}

/* 150%缩放（dpr=1.5） */
@media screen and (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 1.74) {
  body {
    font-size: 0.666em;
  }
  .container {
    width: 66.6%;
  }
}

这个方法需要逐个元素调整，适合局部细节优化，不适合全局统一适配。

为什么你的原有代码无效？ #

Windows的DPI缩放会让浏览器自动调整逻辑像素与物理像素的映射，部分浏览器（如Chrome）会忽略initial-scale的设置，强制按照系统缩放比例渲染页面，仅修改viewport参数无法绕过这个机制。

内容的提问来源于stack exchange，提问作者ChahinDev