强制 Chrome 缩放到 100%答案

【问题标题】：Force Chrome Zoom to 100%强制 Chrome 缩放到 100%
【发布时间】：2013-03-29 14:22:31
【问题描述】：

在我们正在创建的产品中，有一个功能在 Chrome 中无法完美运行，除非您使用 100% 缩放。 Chrome 不是我们产品的主要目标，我们预计不到 5% 的用户会使用它，因此我们无法分配大量时间来修复缩放 Chrome 的此功能（我们预计会非常低Cuser 用户的百分比）。

该功能是一个滚动小部件，一次向他们显示项目列表的有限视图。在 FF、IE 和 100% 缩放的 Chrome 中，每次单击左箭头或右箭头都会滚动一个项目。在不是 100% 缩放的 Chrome 中，每次点击它会滚动 0.5 到 1.5 个项目。

我们还在 Chrome 中发现了一些小的图形故障，缩放级别不同于 100%。

在我们的测试中，我们发现 Chrome 有时会在进入我们的网站时更改缩放级别，这似乎是自动的。在去我们的测试站点之前，我们会确保缩放为 100%，但是当我们到达测试站点时，缩放变为 90%。

有没有办法以编程方式强制 Chrome 进行 100% 缩放？

【问题讨论】：

stackoverflow.com/questions/9441557/…
@RalfdeKleine - 我完全同意那里接受的答案。我很想有时间正确完成这项工作。不幸的是，我们不能证明向客户收取费用以以正确的方式修复此错误，而不是当它适用于他们的特定目标浏览器（在所有缩放级别）时。

标签： google-chrome zooming

【解决方案1】：

JS：

$(document).ready(function () {
    document.body.style.transform = "scale(" + (window.innerWidth) / (window.outerWidth) + ")";
    document.body.style.width = 100 * (window.outerWidth) / (window.innerWidth) + "%";
});

$(window).resize(function () {
    document.body.style.transform = "scale(" + (window.innerWidth) / (window.outerWidth) + ")";
    document.body.style.width = 100 * (window.outerWidth) / (window.innerWidth) + "%";
});

CSS：

body{
  transform-origin:0 0;
  position:absolute;
  top:0;
  left:0;
  right:0;
  margin:0;
  padding:0;
}

正文：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
body body body body...

更新：

如果您的网页内容在左侧，请使用 transform-origin: 0 0;如果它在正确的使用 transform-origin: 100% 0;如果它在中心使用 transform-origin: center 0; 如果您在几个地方有内容或从左侧/顶部有 x 像素，而不是单独缩放正文缩放每个 div 并将变换原点适合它的位置，然后像这样调整它的宽度和高度：

document.getElementById("id").style.width = document.getElementById("id").style.width * (window.outerWidth) / (window.innerWidth) + "px";
document.getElementById("id").style.height = document.getElementById("id").style.height * (window.outerWidth) / (window.innerWidth) + "px";

【讨论】：