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

Question

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

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

原文由 Sathishkumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Ionut 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 nashcheez 发布，翻译遵循 CC BY-SA 3.0 许可协议