基于浏览器大小/调整大小的 Jquery 更改高度

IT技术 javascript jquery browser screen
2021-02-03 06:56:22

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

提前致谢

5个回答

如果您使用 jQuery 1.2 或更新版本，您可以简单地使用这些：

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

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

使用它比 window.resizeTo( w,h ) 有什么优势吗？？
2021-03-21 06:56:22
$(document).height() 严重不可靠，导致全屏浏览器的值低于几乎全屏浏览器的值。$(window).height() 和 width() 似乎更安全。在任何情况下，您可能对意图比对确切值更感兴趣，因此添加一个合理的缓冲区来解释 $(window).height 和浏览器窗口外部大小之间的差异可能是您想要的.
2021-03-25 06:56:22
感谢您提及 jQuery 版本号。我正在处理一个使用旧版本的文件，并且当我尝试获取 $(window).width 时，在 FireBug 中不断获取“e.style is undefined”。也许下一个搜索该错误的人会找到这个答案。:)
2021-04-08 06:56:22 
$(function(){
    $(window).resize(function(){
        var h = $(window).height();
        var w = $(window).width();
        $("#elementToResize").css('height',(h < 768 || w < 1024) ? 500 : 400);
    });
});

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

你没有 (h < 1024 || w < 768) 吗？500 : 400 倒退？我相信问题是在小于 1024x768 的情况下将其设置为 400。此外，正如另一位海报所提到的，检查高度和宽度是否与错误值相符。所以， s/b .css('height', (h < 768 || w < 1024) ? 400 : 500);
2021-03-27 06:56:22

以 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);
}
或者前两行可以写成一行... $(window).resize(resizeFrame).resize();
2021-03-18 06:56:22

请注意，Jquery 1.8.0 存在一个错误，$(window).height() 返回所有文档高度！

我有一种感觉，支票应该是不同的

新：h < 768 || w < 1024

其它你可能感兴趣的问题
上一篇在 Chrome 扩展程序中复制到剪贴板 下一篇javascript中的简单分页