Question

即使用户放大/缩小或调整浏览器窗口的大小，我也试图保持DIV的物理大小不变。

这是我最近的尝试：

<center>Hello world</center>

<div style="text-align:left;background-color:#474747; 
line-height:1.4;color:#a7a7a7;font-size:2vh;width:60vh;height:30vh;
bottom:0px;right:0px;margin:2vh;position:fixed;padding:1vh;">FixedDIV</div>

https://codepen.io/hexatomium/full/MWwNpzB

除了垂直调整窗口大小时，这几乎满足了我的目标。

感谢任何想法。

注意：理想情况下，我想在Chrome和IE11中实现此功能。

Answer 1

您可以尝试使用Visual Viewport API。

这将进一步向前迈进。

const update = (event) => {
    document.getElementById("size").style.width = window.visualViewport.width / 10 + 'px';
    document.getElementById("size").style.height = window.visualViewport.height / 10 + 'px';
    document.getElementById("size").innerHTML = window.visualViewport.width + 'px';
}
visualViewport.addEventListener('scroll', update);
visualViewport.addEventListener('resize', update);
addEventListener('scroll', update);

https://codepen.io/AvremiFriedman/pen/abOejZJ

它在代码上不能很好地工作。

在您的计算机上尝试。您会得到更好的结果。

如何保持DIV的大小独立于窗口大小调整和缩放？

1 个答案: