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

Question

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

我有2个div元素,如果窗口大小是568px意味着,div1想要38%而div2是62%.在每个尺寸中,两个div都希望保持相同的百分比大小.

Answer 1

你可以用这个:

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

更新:

要在屏幕等于或小于568px时设置两个div元素的宽度,您可以执行以下操作:

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

或者使用我认为推荐的基于CSS的解决方案,在这种情况下更简单,利用media queries:

.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>