如何在JavaScript中获取浏览器窗口大小？

21 浏览
0 Comments

如何在JavaScript中获取浏览器窗口大小？

这个问题已经有答案了:

获取屏幕、当前网页和浏览器窗口的大小

我需要在javascript中获取浏览器窗口大小，并将窗口大小设置为div大小。

我有两个div元素，如果窗口大小为568px，则div1要占38％，div2要占62％。在任何大小下，两个div元素都要保持相同的百分比大小。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

使用以下代码获取浏览器窗口的高度和宽度：

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

0
0 Comments

您可以使用以下内容：

var width = window.innerWidth;
var height = window.innerHeight;

更新：

当屏幕等于或小于568像素时，您可以使用以下内容来设置这两个div元素的宽度：

if(width <= 568) { document.getElementById('div_1').style.width = '38%'; document.getElementById('div_2').style.width = '62%'; }

或者使用基于CSS的解决方案，我认为在这种情况下推荐并且更简单，可以利用媒体查询：

.container{
  width: 100%;
}
.div_element {
  height: 100px;
  width: 100%;
}
#div_1 {
  width: 38%;
  background: #adadad;
}
#div_2 {
  width: 62%;
  background: #F00;
}
@media(max-width: 568px) {
  #div_1 {
    width: 38%;
  }
  #div_2 {
    width: 62%;
  }
  .div_element {
    float: left;
  }
}


    div 1
    div 2

0