javascript 如何使用javascript查找最大用户浏览器窗口宽度和当前

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15327829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 00:23:32  来源:igfitidea点击:

How to find using javascript the maximum users browser window width and current

javascript

提问by alexalikiotis

I am searching a way using javascript to find visitors browser window width and height but i want also find the maximum window sizes so if the user make the window smaller or bigger some elements change automatic position or size like facebook chat. Any suggestions ?

我正在寻找一种使用 javascript 查找访问者浏览器窗口宽度和高度的方法,但我还想找到最大窗口大小,因此如果用户使窗口变小或变大,某些元素会更改自动位置或大小,例如 facebook 聊天。有什么建议 ?

回答by alt

The maximum browser size width would be the width and height of the screen:

最大浏览器大小宽度将是屏幕的宽度和高度:

screen.height;
screen.width;

But I'd use CSS media queries for what you're trying to do:

但是我会使用 CSS 媒体查询来处理您要执行的操作:

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

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

Something like this would make the page background black if the window is less than 500px wide:

如果窗口宽度小于 500px,这样的事情会使页面背景变黑:

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

Update:

更新:

Oh, and you'll want a polyfill for older browsers that don't support media queries:

哦,对于不支持媒体查询的旧浏览器,您需要一个 polyfill:

https://github.com/scottjehl/Respond

https://github.com/scottjehl/Respond

That'll get you media queries all the way down through IE6!

这将使您通过 IE6 一直进行媒体查询!

回答by Sarah-Jane

Maximum window height is

最大窗口高度为

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

回答by Anoop

You can use window.innerWidthand window.innerHeight

您可以使用window.innerWidthwindow.innerHeight

You can position any dom element relative to window using css position 'fixed' or absolute so that on window resize the will readjust itself.

您可以使用 css 位置“固定”或绝对位置相对于窗口定位任何 dom 元素,以便在窗口调整大小时将重新调整自身。

You can use window.onresizeto listen window resize event

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

jQuery equivalent

jQuery 等价物

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

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

回答by lmortenson

If you can use jQuery, it's pretty easy to set up a listener in a cross-browser fashion:

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