如何在javascript中获取浏览器窗口大小？ [复制]答案

【问题标题】：how to get browser window size in javascript? [duplicate]如何在javascript中获取浏览器窗口大小？ [复制]
【发布时间】：2017-04-15 17:45:57
【问题描述】：

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

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

【问题讨论】：

get browser window size javascript

标签： javascript jquery html css

【解决方案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>

【讨论】：

如何设置以上百分比的div宽度？
568px 是我提到的一个示例宽度，如果大小增加，则两个 div 大小在主窗口大小中计算相同的百分比。
那么请检查我的第二个解决方案，如果您需要更多帮助，请告诉我。
var width = window.innerWidth; c=(宽度/100)*38;警报（c）；
你对上面的代码行有什么看法？它只计算脚本中的百分比，是对还是错？我只是这样问。我知道上面创建的css方法，我只需要在脚本中创建。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

既然 CSS 本身可以做到这一点，为什么还需要 JS 来做到这一点？这段代码将维护每个屏幕尺寸上的 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>

【讨论】：