如何用CSS/JavaScript实现网页缩小适配Windows系统缩放比例？

方法1：动态计算系统缩放比例，用transform适配全局 #

这个方案能避免zoom对vh的影响，同时解决右侧空白问题：

1. 核心逻辑：计算当前系统缩放与开发环境（125%）的比例差，用transform: scale缩放页面，同时调整容器尺寸填满视口。
2. 实现代码：

// 获取当前系统缩放比例（桌面端有效）
const getSystemScale = () => {
  return window.devicePixelRatio || window.visualViewport?.scale || 1;
};

const devScale = 1.25; // 开发时的系统缩放比例
const currentScale = getSystemScale();
const scaleFactor = devScale / currentScale;

if (scaleFactor !== 1) {
  const htmlEl = document.documentElement;
  htmlEl.style.transform = `scale(${scaleFactor})`;
  htmlEl.style.transformOrigin = '0 0';
  // 缩放后反向设置宽高，避免空白与滚动异常
  htmlEl.style.width = `${100 / scaleFactor}%`;
  htmlEl.style.height = `${100 / scaleFactor}%`;
  document.body.style.margin = '0';
}

• 优势：transform不会改变视口的基础尺寸，设置height:100vh的区块能保持原始高度，仅视觉上缩放，和手动缩小网页的效果一致。

方法2：CSS媒体查询适配特定缩放比例 #

如果只需针对150%系统缩放做适配，可直接用CSS媒体查询：

/* 匹配系统缩放150%（对应1.5dppx） */
@media (min-resolution: 1.5dppx) and (max-resolution: 1.5dppx) {
  html {
    transform: scale(0.8333); /* 1.25/1.5 = 5/6 ≈0.8333 */
    transform-origin: 0 0;
    width: 120%; /* 1/0.8333 ≈120% */
    height: 120%;
  }
}

/* 匹配开发环境的125%缩放，保持默认样式 */
@media (min-resolution: 1.25dppx) and (max-resolution: 1.25dppx) {
  html {
    transform: none;
    width: 100%;
    height: 100%;
  }
}

• 说明：dppx是设备像素比单位，125%缩放对应1.25dppx，150%对应1.5dppx；此方案无需JS，但仅覆盖指定缩放比例，其他比例需额外添加媒体查询。

方法3：修正zoom导致的vh异常 #

如果更习惯用zoom属性，可通过JS手动修正100vh元素的高度：

const devScale = 1.25;
const currentScale = getSystemScale();
const scaleFactor = devScale / currentScale;

if (scaleFactor !== 1) {
  document.body.style.zoom = scaleFactor;
  // 修正所有使用100vh的元素
  const vhElements = document.querySelectorAll('.vh-100, [style*="height: 100vh"]');
  vhElements.forEach(el => {
    el.style.height = `${window.innerHeight}px`;
  });
}

• 注意：需要给所有用100vh的元素统一加类名（比如.vh-100），确保能精准匹配目标元素。

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