JavaScriptのブラウザウィンドウサイズを取得するには？

Question

ブラウザのウィンドウサイズを取得し、ウィンドウサイズをjavascriptのdivサイズに設定する必要があります。

ウィンドウサイズが568ピクセルの場合、div1は38％、div2は62％を意味します。 どのサイズでも、両方のdivは同じパーセンテージサイズを維持したいと考えています。

Answer 1

あなたはこれを使用することができます：

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

UPDATEを：画面が等しいか、568pxよりも小さい場合

は、2つのdiv要素の幅を設定するにはあなたが行うことができます：

を

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

またはCS私はmedia queriesを利用することによって、このような場合にお勧めし、より簡単になると思いますSのみベースのソリューション：

.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

なぜ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>