如何在javascript中獲取瀏覽器窗口大小？

Question

我需要獲取瀏覽器窗口大小，並將窗口大小設置爲javascript中的div大小。

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

Answer 1

您可以使用此：

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

UPDATE：

要設置兩個div元素的寬度時，屏幕等於或小於568px小，你可以這樣做：

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

或者使用CS僅S基礎的解決方案，我想建議，更簡單，在這種情況下，通過利用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>

Answer 2

使用下面的代碼獲取瀏覽器窗口的高度和寬度：

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

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

Answer 3

爲什麼你需要JS來做到這一點，當CSS本身可以這樣做？這段代碼將維持在每一個屏幕尺寸

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>