系统1920x1080分辨率下，如何设置浏览器缩放至125%？

document.body.style.zoom仅作用于body元素，无法实现整个浏览器的全局缩放效果，以下是几种可行的解决方案：

1. 操作根元素实现全局缩放 #

直接调整HTML根元素的zoom属性，覆盖范围包含整个页面所有内容：

document.documentElement.style.zoom = "125%";

根元素是页面最顶层容器，所有子元素会继承该缩放规则，效果更接近浏览器原生缩放。

2. 用CSS Transform兼容多浏览器 #

若zoom属性在部分浏览器（如Firefox）存在兼容性问题，可使用transform: scale()配合容器调整：

const scaleRatio = 1.25;
document.documentElement.style.transform = `scale(${scaleRatio})`;
document.documentElement.style.transformOrigin = "top left";
document.documentElement.style.width = `${100 / scaleRatio}%`;
document.documentElement.style.height = `${100 / scaleRatio}%`;

该方法通过缩放根元素，同时调整宽高避免页面滚动条异常，transformOrigin确保缩放从左上角开始，和浏览器原生缩放行为对齐。

3. 匹配目标系统环境后自动触发 #

针对你提到的「1920x1080分辨率+系统文本100%」场景，可先检测环境再应用缩放：

// 检测屏幕分辨率
const targetResolution = screen.width === 1920 && screen.height === 1080;
// 间接判断系统文本缩放比例（文本100%时，多数场景下devicePixelRatio为1）
const targetTextScale = window.devicePixelRatio === 1;

if (targetResolution && targetTextScale) {
  document.documentElement.style.zoom = "125%";
}

注意：设备像素比的判断可能因浏览器或系统细节略有差异，可根据实际测试结果微调。

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