如何找到使用javascript最大用戶瀏覽器窗口的寬度和當前

Question

我正在尋找一種方式使用JavaScript來查找訪問者瀏覽器窗口的寬度和高度，但我也想找到最大窗口大小，所以如果用戶使窗口更小或更大一些元素改變自動位置或大小像Facebook聊天。 有什么建議么 ？

Answer 1

最大瀏覽器大小寬度將是屏幕的寬度和高度：

screen.height;
screen.width;

但我會使用CSS媒體查詢來做你想做的事情：

http://css-tricks.com/css-media-queries/

如果窗口小於500px寬，這樣的東西會使頁面背景變黑：

@media only screen and (max-width: 500px) {
  body {
    background: #000;
  }
}

更新：

哦，你會想要一個不支持媒體查詢的舊瀏覽器的polyfill：

https://github.com/scottjehl/Respond

這將通過IE6向您提供媒體查詢！

Answer 2

最大窗口高度是

window.screen.availHeight - (window.outerHeight - window.innerHeight)

Answer 3

您可以使用window.innerWidth和window.innerHeight

你可以使用css位置'fixed'或絕對位置相對於窗口定位任何dom元素，這樣在窗口調整大小時will會重新調整它自己。

您可以使用window.onresize來監聽窗口大小調整事件

jQuery等價

$(window).width(); $(window).height() $(window).width(); $(window).height()和$(window).resize(function(){});

Answer 4

如果你可以使用jQuery，那么以跨瀏覽器的方式設置一個監聽器非常容易：

$(window).resize(function() {
  alert($(window).width()) //window width
  alert($(window).height()) //window height
}).trigger("resize") //to ensure that you do whatever you're going to do when the window is first loaded;