3

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

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

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

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

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

4

1 回答 1

4

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";
于 2017-07-21T19:43:53.273 回答