Javascript 浏览器大小（宽度和高度）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2474009/
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
Browser size (width and height)
提问by dono
I'm trying to detect the browser's current size (width and height). I know it's super easy in jQuery with $(document).width and $(document).height, but I don't want to add the size of the jQuery lib to the project, so I'd rather just use built in JavaScript. What would be the short and efficient way to do the same thing with JavaScript?
我正在尝试检测浏览器的当前大小（宽度和高度）。我知道在 jQuery 中使用 非常简单$(document).width and $(document).height，但我不想将 jQuery 库的大小添加到项目中，所以我宁愿只使用内置的 JavaScript。用 JavaScript 做同样的事情的简短而有效的方法是什么？
回答by Joel
// first get the size from the window
// if that didn't work, get it from the body
var size = {
width: window.innerWidth || document.body.clientWidth,
height: window.innerHeight || document.body.clientHeight
}
回答by kennebec
function getWindowSize(){
var d= document, root= d.documentElement, body= d.body;
var wid= window.innerWidth || root.clientWidth || body.clientWidth,
hi= window.innerHeight || root.clientHeight || body.clientHeight ;
return [wid,hi]
}
IE browsers are the only ones who don't use innerHeight and Width.
IE 浏览器是唯一不使用innerHeight 和Width 的浏览器。
But there is no 'standard'- just browser implementations.
但是没有“标准”——只有浏览器实现。
Test the html (document.documentElement) clientHeight before checking the body- if it is not 0, it is the height of the 'viewport' and the body.clientHeight is the height of the body- which can be larger or smaller than the window.
在检查body之前测试html（document.documentElement）clientHeight - 如果它不是0，它是'视口'的高度，body.clientHeight是body的高度 - 它可以大于或小于窗口.
Backwards mode returns 0 for the root element and the window (viewport) height from the body.
Backwards 模式为根元素和窗口（视口）距主体的高度返回 0。
Same with width.
与宽度相同。
回答by Enrique
Try this;
尝试这个;
<script type="text/javascript">
winwidth=document.all?document.body.clientWidth:window.innerWidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;
alert(winwidth+","+winHeight);
</script>
回答by Sriwantha Attanayake
Here is a code sample
这是一个代码示例
function getSize(){
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;
}
回答by Dzeimsas Zvirblis
My case use for window.innerWidthinvolved building a custom modal pop up window. Simply put, the user clicks the button, the pop up opens centered in the browser and there is a transparent black bkgd behind the pop up. My issue was finding the width and height of the browser to create the transparent bkgd.
我的案例用于window.innerWidth涉及构建自定义模式弹出窗口。简单来说，用户点击按钮，弹出窗口以浏览器居中打开，弹出窗口后面有一个透明的黑色bkgd。我的问题是找到浏览器的宽度和高度来创建透明的 bkgd。
The window.innerWidthworks great to find the width but remember window.innerWidth and window.innerHeightdo not compensate for the scroll bars, so if your content goes beyond the visible content area. I had to subtract 17px from the value.
window.innerWidth找到宽度的效果很好，但请记住window.innerWidth and window.innerHeight不要补偿滚动条，因此如果您的内容超出了可见的内容区域。我不得不从值中减去 17px。
transBkgd.style.width = (window.innerWidth - 17) + "px";
Since the content of the site always went beyond the visible height I couldnt use window.innerHeight. If the user scrolled down the transparent bkgd would end at that point and that just looked nasty. In order to maintain the transparent bkgd all the way to the bottom of the content I used document.body.clientHeight.
由于网站的内容总是超出了我无法使用的可见高度window.innerHeight。如果用户向下滚动，透明的 bkgd 将在那时结束，这看起来很糟糕。为了保持bkgd一直透明到底部的内容我用了document.body.clientHeight。
transBkgd.style.height = document.body.clientHeight + "px";
I Tested the pop up in IE, FF, Chrome, and it looks good across the board. I know this doesnt follow the original question too much but I figure it might help if anyone else runs into the same issue when creating a custom modal pop up.
我在 IE、FF、Chrome 中测试了弹出窗口，它看起来全面不错。我知道这并没有过多地遵循原始问题，但我认为如果其他人在创建自定义模式弹出窗口时遇到同样的问题，这可能会有所帮助。
