如何在JavaScript中获取浏览器视口的宽度和高度并将其应用于CSS ID？

Question

有没有一种方法可以使用Javascript获得实时的width和height值，并将其应用于多个div id ？ 我想建立一个站点，该站点具有5个部分，这些部分的width: 100vw始终width: 100vw ， height: 100vh始终width: 100vw height: 100vh 。 一次只能看到一个部分，因为每个部分都有一个#锚点，并且垂直滚动被禁用。

我遇到的问题是，当我调整浏览器窗口的大小时，CSS无法跟上，必须刷新以获取部分width和height新值。 我想知道Javascript是否有一种方法可以不断监视浏览器的width和height并将这些值应用于一组id 。

例

浏览器窗口的大小为id #one, #two x 500px，因此id #one, #two现在的width: 1000px id #one, #two height: 500px ，将浏览器的大小调整为1200px x 600px时#one , #two的值将设置为width: 1200px和height: 600px CSS中为height: 600px 。

这是我的codepen 。

Answer 1

正如@ gary-storey已经说过的，请使用resize事件：

$(window).resize(function() {
   var curWinWidth  = $(window).width();
   var curWinHeight = $(window).height();
   // do stuff here
});

Answer 2

我已经在自己的页面上完成了此操作：

$(window).resize(function() {
    <!-- get viewport size//set content size -->
    var currentViewPortHeight = $( window ).height();
    var currentViewPortWidth = $( window ).width(); 
    $("#mainFrame").css({ "height" : currentViewPortHeight, "width" : currentViewPortWidth });
    $("#mainFrame").resize();   
};

不过，您可以设置超时间隔-因为此事件在窗口大小调整期间经常触发-特别是在用户使用拖放操作时。 根据我的stackoverflow研究，最好是300ms的超时时间，以实现平滑的调整大小过渡，而不是频繁触发...