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

Posted 2023-02-22

【中文标题】如何在javascript中获取浏览器窗口大小？ [复制]

【英文标题】：how to get browser window size in javascript? [duplicate]

【发布时间】：2017-04-15 17:45:57

【问题描述】：

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

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

【问题讨论】：

get browser window size javascript

【参考方案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>