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

Question

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

如果窗口大小为568px，我有2个div元素，div1希望占38％，div2希望占62％。在每个大小上，两个div都希望保持相同的百分比大小。

- Sathishkumar

Answer 1

您可以使用这个：

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

更新：

如果屏幕的宽度等于或小于568px，您可以设置两个

元素的宽度如下:

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 class='container'>
  <div id='div_1' class='div_element'>
    div 1
  </div>
  <div id='div_2' class='div_element'>
    div 2
  </div>
</div>

- Ionut Necula

---

如何以百分比设置div宽度？ - Sathishkumar

568像素是一个示例宽度，如果尺寸增加，则两个div的大小将以相同的百分比计算在主窗口大小中。 - Sathishkumar

变量宽度=窗口.内宽; c=(宽度/100)*38; 警告(c); - Sathishkumar

你提到的那个解决方案不正确。 - Ionut Necula

好的，谢谢您的帮助。我明白了。 - Sathishkumar

Answer 2

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

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

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

- nashcheez

Answer 3

为什么需要使用JS来做这件事，CSS本身就可以做到呢？这段代码将在每个屏幕尺寸上保持div的大小。

body {
  margin: 0px;
  height: 100vh;
}
#div1 {
  width: 38%;
  height: 100%;
  float: left;
  background: red;
}
#div2 {
  width: 62%;
  height: 100%;
  float: left;
  background: yellow;
}
#divMain {
  clear: both;
  height:100%;
}
#divMain:after,
#divMain:before {
  display: table;
  content: '';
}
#divMain:after {
  clear: both;
}

<div id="divMain">
  <div id="div1">
  </div>
  <div id="div2"></div>
</div>

- Jones Joseph