浏览器尺寸（宽度和高度）

Question

我想检测浏览器的当前大小(宽度和高度)。我知道在jQuery中使用$(document).width和$(document).height非常容易，但是我不想将jQuery库的大小添加到项目中，所以我宁愿只使用内置JavaScript。如何用JavaScript以简短、有效的方式完成同样的工作呢？

- dono

---

这个问题在以下链接中得到了很好的回答：https://dev59.com/VnI-5IYBdhLWcg3wm5vN - vsync

Answer 1

// 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

---

正文大小与窗口大小不同，实际上应该是窗口大小。 - vsync

这可以使用短路运算符进行优化。例如：width: window.innerWidth || document.body.clientWidth。 - Peter Di Cecco

@vsync，没错，但并不是所有浏览器都定义了窗口大小。@Peter，说得好。我会更新的。 - Joel

Answer 2

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的浏览器。

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

在检查body之前测试html（document.documentElement）clientHeight-如果它不是0，则是“视口”的高度，而body.clientHeight是body的高度-可以大于或小于窗口。

向后兼容模式为根元素返回0，从body返回窗口（视口）高度。

宽度同理。

- kennebec

Answer 3

试一试这个;

 <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

---

你不应该使用像document.all这样的浏览器检查方式，而应该检查clientWidth是否未定义。 - Joel

@Joel，为什么不呢？你能否贡献你的答案。谢谢。 - dono

浏览器是否实现document.all并不意味着它是否实现document.body.clientHeight。你应该检查你想要的属性，而不是一个无关的属性。 - Joel

返回给出页面高度而非浏览器高度的代码。 - vsync

Answer 4

这是一个代码示例

function getSize(){

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

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


}

- Sriwantha Attanayake

Answer 5

我的案例使用了window.innerWidth，用于创建一个自定义的模态弹出窗口。简单来说，用户点击按钮后，弹出窗口会在浏览器中心打开，并且弹出窗口后面有一个透明黑色背景。我的问题是如何找到浏览器的宽度和高度以创建透明背景。 window.innerWidth很好地找到了宽度，但请记住window.innerWidth和window.innerHeight不会考虑滚动条，所以如果您的内容超出了可见内容区域，必须从值中减去17px。

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

由于网站内容总是超出可见高度，因此我无法使用window.innerHeight。如果用户向下滚动，透明背景将在该点结束，这看起来很糟糕。为了使透明背景一直延伸到内容底部，我使用了document.body.clientHeight。

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

我在IE、FF和Chrome中测试了弹出窗口，效果都很好。虽然这不太符合原来的问题，但我认为如果其他人在创建自定义模态弹出窗口时遇到同样的问题，这可能会有所帮助。

- Dzeimsas Zvirblis