javascript - Jqueryはブラウザのサイズ/サイズ変更に基づいて高さを変更します

Question

ブラウザの高さ/幅を決定する方法があるかどうか疑問に思いました。私がやろうとしているのは、ブラウザのサイズが1024x768のときにdivの高さを500pxに設定することです。それより低い場合は、400pxに設定します。

前もって感謝します

Answer 1

jQuery 1.2以降を使用している場合は、次の方法を使用できます。

$(window).width();
$(document).width();
$(window).height();
$(document).height();

そこから、要素の高さを決定するのは簡単なことです。

Answer 2

$(function(){
    $(window).resize(function(){
        var h = $(window).height();
        var w = $(window).width();
        $("#elementToResize").css('height',(h < 768 || w < 1024) ? 500 : 400);
    });
});

スクロールバーなどはウィンドウサイズに影響を与えるため、希望のサイズに微調整することをお勧めします。

Answer 3

Chadの回答に基づいて、その関数をonloadイベントに追加して、ページの読み込み時にもサイズが変更されるようにします。

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
    var h = $(window).height();
    var w = $(window).width();
    $("#elementToResize").css('height',(h < 768 || w < 1024) ? 500 : 400);
}

Answer 4

注意してください、Jquery 1.8.0にはバグがあり、$（window）.height（）はすべてのドキュメントの高さを返します！

Answer 5

チェックが違うはずなのに

新規：h <768 || w <1024