javascript-浏览器大小(宽度和高度)

我正在尝试检测浏览器的当前大小(宽度和高度)。 我知道在带有$(document).width and $(document).height264的jQuery中超级容易,但是我不想将jQuery库的大小添加到项目中,因此我只想使用内置的JavaScript。 用JavaScript做同样的事情的快捷简便的方法是什么?

dono asked 2020-02-23T03:28:30Z
5个解决方案
83 votes
// 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
}
Joel answered 2020-02-23T03:43:57Z
8 votes
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浏览器是唯一不使用innerHeight和Width的浏览器。

但是没有“标准”,只有浏览器实现。

在检查正文之前,请测试html(document.documentElement)clientHeight-如果它不为0,则是'viewport'的高度,而body.clientHeight是body的高度-可以大于或小于窗口。

向后模式为根元素和距主体的窗口(视口)高度返回0。

宽度相同。

kennebec answered 2020-02-23T03:44:36Z
3 votes

尝试这个;

 <script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight);
</script> 
Enrique answered 2020-02-23T03:44:56Z
3 votes

这是一个代码示例

function getSize(){

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;


}
Sriwantha Attanayake answered 2020-02-23T03:45:16Z
2 votes

我对window.innerHeight的案例使用涉及构建自定义模式弹出窗口。 简而言之,用户单击按钮,弹出窗口在浏览器中居中打开,并且在弹出窗口后面有一个透明的黑色bkgd。 我的问题是找到浏览器的宽度和高度来创建透明的bkgd。

window.innerHeight非常适合找到宽度,但请记住document.body.clientHeight不能补偿滚动条,因此,如果您的内容超出可见内容区域。 我必须从值中减去17px。

transBkgd.style.width = (window.innerWidth - 17) + "px";

由于网站的内容始终超出可见高度,因此我无法使用window.innerHeight。如果用户向下滚动,则透明bkgd会在该点结束,看起来很讨厌。 为了始终保持透明bkgd到内容的底部,我使用了document.body.clientHeight

transBkgd.style.height = document.body.clientHeight + "px";

我在IE,FF,Chrome中测试了弹出窗口,整体看起来不错。 我知道这跟原始问题并没有太多,但我认为如果其他人在创建自定义模式弹出窗口时遇到同一问题可能会有所帮助。

Dzeimsas Zvirblis answered 2020-02-23T03:45:51Z
translate from https://stackoverflow.com:/questions/2474009/browser-size-width-and-height