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

Question

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

如何使用CSS缩放整个网页？

然而，当我尝试实现它时，它比firefox更适合chrome，因为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中有一个简单的修复程序：

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

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

额外奖励：
您可以只使用scale，它将适用于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"/>