Jquery根据浏览器大小/调整大小更改高度

时间:2009-05-08 03:40:09

标签: javascript jquery browser screen

我想知道是否有办法确定浏览器的高度/宽度。 我想要做的是在浏览器大小为1024x768时将div上的高度设置为500px,对于任何更低的值,我想将其设置为400px。

提前致谢

5 个答案:

答案 0 :(得分:68)

如果您使用的是jQuery 1.2或更新版本,则只需使用以下命令:

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

从那里决定元素的高度是一件简单的事情。

答案 1 :(得分:47)

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

滚动条等对窗口大小有影响,因此您可能需要调整到所需的大小。

答案 2 :(得分:25)

根据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);
}

答案 3 :(得分:4)

注意,Jquery 1.8.0有一个错误,$(窗口).height()返回所有文档高度!

答案 4 :(得分:2)

我觉得检查应该是不同的

新: h&lt; 768 || w&lt; 1024