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

Question

我想知道是否有一种方法来确定浏览器的高度/宽度。 我尝试的是，当浏览器大小为1024x768时，将

元素的高度设置为500像素，而对于任何低于此的情况，我希望将其设置为400像素。

- AlteredConcept

---

请注意，这里指定的尺寸（1024x768）听起来更像是屏幕分辨率而不是浏览器大小。如果您想要检查浏览器，则应使用较小的尺寸，例如1000x700，以考虑边框、菜单、工具栏和状态栏。 - Alexis Wilke

Answer 1

如果你使用的是jQuery 1.2或更高版本，你可以直接使用以下代码：

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

从那里开始，决定您元素的高度就是一件简单的事情。

- TM.

---

$(document).height()的可靠性很差，全屏浏览器下得到的值比几乎全屏的浏览器要低。$(window).height()和width()似乎更加可靠。无论如何，你可能更关心意图而不是确切的值，因此为了弥补$(window).height和浏览器窗口的外部尺寸之间的差异，添加一个合理的缓冲区可能是你想要的。 - Oskar Austegard

感谢您提到jQuery版本号。我正在处理一个使用旧版本的文件，并且每当我尝试获取$(window).width时，在FireBug中会出现“e.style未定义”的错误。也许下一个搜索这个错误的人会找到这个答案。 :) - Nathan Long

使用这个与window.resizeTo(w,h)相比有什么优势吗？ - Xitcod13

Answer 2

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

滚动条等会影响窗口大小，所以您可能需要调整到所需的大小。

- Chad Grant

---

你是说将 (h < 1024 || w < 768) ? 500 : 400 改成在分辨率小于1024x768时使用400，对吗？另外，正如其他帖子中提到的那样，应该检查高度和宽度是否低于正确值。因此，修改为 .css('height', (h < 768 || w < 1024) ? 400 : 500);。 - Mikezx6r

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

- Jeroen Ritmeijer

---

顶部的两行代码可以合并为一行： $(window).resize(resizeFrame).resize(); 该代码的作用是在窗口大小改变时自动调整页面框架大小，并立即执行调整操作。 - Oskar Austegard

Answer 4

请注意，Jquery 1.8.0 存在一个 bug，$(window).height() 返回整个文档的高度！

- Thomas Decaux

Answer 5

我有一种感觉，认为检查应该不同。

新的： h < 768 || w < 1024

- Svetoslav Marinov