javascript - 如何使用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

如果您可以使用 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;

Answer 4

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

您可以使用 css position 'fixed' 或 absolute 相对于窗口定位任何 dom 元素，以便在调整窗口大小时会重新调整自身。

您可以使用window.onresize来监听窗口调整大小事件

等效的 jQuery

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