Question

在我们正在创建的产品中，有一项功能在Chrome中无法正常运行，除非您处于100％缩放状态。 Chrome不是我们产品的主要目标，我们预计不到5％的用户会使用它，因此我们无法为缩放的Chrome（我们预计会非常低）修复此功能需要花费大量的时间Cusers用户的百分比）。

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

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

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

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

Answer 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";

强制Chrome缩放至100％

1 个答案: