在不改变 Firefox 屏幕中心的情况下放大

Question

以下页面提供了一些有关使用 css/javascript 进行放大的有用信息：

How can I scale an entire web page with CSS?

然而，当我尝试实现它时，它在 chrome 上比 firefox 更有效，因为 firefox 将我的内容移动到屏幕顶部并导致（水平）溢出问题：

var current_zoom = 1;

function zoom_in(){
  current_zoom += .1;
  document.body.style.zoom = current_zoom;  
  document.body.style.MozTransform = "scale(" + current_zoom + ")";  
}
function zoom_out(){
  current_zoom -= .1;
  document.body.style.zoom = current_zoom;  
  document.body.style.MozTransform = "scale(" + current_zoom + ")";  
}

document.getElementById("zoom_in_btn").onclick = zoom_in;
document.getElementById("zoom_out_btn").onclick = zoom_out;

#calibration_card{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  width:310px;
  height:190px;
  padding:5px;
  border-style: solid;
  border-radius: 20px;
  color:red;
}

<div id="calibration_card">
  <div>Please zoom in or out until the card on the screen is the same size as a typical card in your wallet by pressing the + and - buttons below</div>

  <div>Please do not use a bank card or driving license for this sort of check</div>
  <div>Once the screen card is as close as possible to your card, please press "Proceed"</div>
  <button class="btn btn-primary" id="zoom_in_btn">+</button>
  <button class="btn btn-primary" id="zoom_out_btn">-</button>
  <button class="btn btn-primary" onclick="Trial.submit()">Proceed</button>
</div>

<input type="hidden" id="calibration_zoom" name="calibration_zoom"/>

是否有针对 firefox 的简单修复？

Answer 1

是的，firefox 中有一个简单的修复程序：

将此添加到您的 css html,body {height: 100%;width: 100%;}

更长的版本：
Firefox 不支持 zoom CSS 属性它根本不起作用，因此此脚本中的回退是使用 scale 代替。所以实际上你正在缩放没有高度但有宽度的 body 元素，它会增加宽度并使其溢出是正常的。此外，它会将您的内容弹出到顶部，因为它试图将其居中到容器的高度，如我之前所说，该高度为 0。

奖金：
您可以只使用缩放，它适用于 chrome 和 firefox，并且与浏览器的兼容性会更好。

var current_zoom = 1;

function zoom_in(){
  current_zoom += .1;
  document.body.style.transform = "scale(" + current_zoom + ")";
}
function zoom_out(){
  current_zoom -= .1;
  document.body.style.transform = "scale(" + current_zoom + ")";
}

document.getElementById("zoom_in_btn").onclick = zoom_in;
document.getElementById("zoom_out_btn").onclick = zoom_out;

html,body {
  height: 100%;
  width: 100%;
}
      
#calibration_card{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  width:310px;
  height:190px;
  padding:5px;
  border-style: solid;
  border-radius: 20px;
  color:red;
}

<div id="calibration_card">
  <div>Please zoom in or out until the card on the screen is the same size as a typical card in your wallet by pressing the + and - buttons below</div>

  <div>Please do not use a bank card or driving license for this sort of check</div>
  <div>Once the screen card is as close as possible to your card, please press "Proceed"</div>
  <button class="btn btn-primary" id="zoom_in_btn">+</button>
  <button class="btn btn-primary" id="zoom_out_btn">-</button>
  <button class="btn btn-primary" onclick="Trial.submit()">Proceed</button>
</div>

<input type="hidden" id="calibration_zoom" name="calibration_zoom"/>

Answer 2

上述答案的细微变化仅当您使用整个浏览器的宽度和高度并且希望在放大时避免页面尺寸在 Firefox 中增加：

var current_zoom = 1;

function zoom_in(){
  current_zoom += .1;
  document.body.style.transform = "scale(" + current_zoom + ")";

  // the below stops the screen from growing in width and height
  document.body.style.width  = window.innerWidth / current_zoom
  document.body.style.height = window.innerHeight / current_zoom
  document.body.style.transformOrigin = "left top"
}
function zoom_out(){
  current_zoom -= .1;
  document.body.style.transform = "scale(" + current_zoom + ")";

  // the below stops the screen from growing in width and height
  document.body.style.width  = window.innerWidth / current_zoom
  document.body.style.height = window.innerHeight / current_zoom
  document.body.style.transformOrigin = "left top"

}

document.getElementById("zoom_in_btn").onclick = zoom_in;
document.getElementById("zoom_out_btn").onclick = zoom_out;

html,body {
  height: 100%;
  width: 100%;
}
      
#calibration_card{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  width:310px;
  height:190px;
  padding:5px;
  border-style: solid;
  border-radius: 20px;
  color:red;
}

<div id="calibration_card">
  <div>Please zoom in or out until the card on the screen is the same size as a typical card in your wallet by pressing the + and - buttons below</div>

  <div>Please do not use a bank card or driving license for this sort of check</div>
  <div>Once the screen card is as close as possible to your card, please press "Proceed"</div>
  <button class="btn btn-primary" id="zoom_in_btn">+</button>
  <button class="btn btn-primary" id="zoom_out_btn">-</button>
  <button class="btn btn-primary" onclick="Trial.submit()">Proceed</button>
</div>

<input type="hidden" id="calibration_zoom" name="calibration_zoom"/>

在不改变 Firefox 屏幕中心的情况下放大

Zooming in without changing center of screen for firefox

css

firefox

zooming