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
How to find using javascript the maximum users browser window width and current
提问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.innerWidth
and window.innerHeight
您可以使用window.innerWidth
和 window.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.onresize
to 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;