如何获取页面的可视部分的宽度和高度？

Question

How to get them by using JS and jQuery?

I know $(window).innerWidth() can get. But I don't hope it contains the width or height of the scroll bar.

Thank you!

Answer 1

From the jQuery website :

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

If you add overflow:hidden to the body of this page (so there's no scrollbar), then run $(window).width() in a JS console, notice this value increases!

Answer 2

i Have found the best way is with Javascript.

<script type="text/javascript">
var height = document.body.offsetHeight;
var width = document.body.offsetWidth;

//code goes here
</script>

Bear in mind that when you use these, they return an integer so if you are going to use them to apply a style to another object or element then you will have to append them as so:

var newHeight=height + 'px';
var newWidth=width + 'px';