javascript - Get constant browser height and width - Stack Overflow

admin管理员组

文章数量:1314564

I was wondering how I could constantly get the current browser's height and width. Right now, I am using jQuery and have something like this:

var height = window.innerHeight;
var width = window.innerWidth;

This does initially work as it gets the screen when the page is loaded up. However, when the user changes the screen width/height manually, I can't seem to get the current dimensions and the page starts faulting with errors. How should I be checking the dimensions at all times? I've tried googling the answer but I can't seem to find anything applicable, though I'm sure many others have had the same issue (I don't think I'm searching up the right keywords!). Please let me know what I can do!! Thanks!

I was wondering how I could constantly get the current browser's height and width. Right now, I am using jQuery and have something like this:

var height = window.innerHeight;
var width = window.innerWidth;

This does initially work as it gets the screen when the page is loaded up. However, when the user changes the screen width/height manually, I can't seem to get the current dimensions and the page starts faulting with errors. How should I be checking the dimensions at all times? I've tried googling the answer but I can't seem to find anything applicable, though I'm sure many others have had the same issue (I don't think I'm searching up the right keywords!). Please let me know what I can do!! Thanks!

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Aug 4, 2015 at 19:08 trynacodetrynacode 37111 gold badge99 silver badges1818 bronze badges 3

• I think you might be able to listen for window resize events and query the height/width then. See stackoverflow./questions/641857/… – aaron-prindle Commented Aug 4, 2015 at 19:11
• I feel caputring outerWidth would be a better option to resize the window based on this value. – Jop.pop Commented Aug 4, 2015 at 19:17
• Do you think any of this would work if in my CSS file, I have declared the divs with a position:absolute ? Or does that make it so that the divs cannot fit the appropriate size when a user manually changes the size of the screen? – trynacode Commented Aug 4, 2015 at 21:00

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Use a window.onresize function as well as a window.onload handler to update the width and height variables.

(Resizeable Demo)

var width,height;
window.onresize = window.onload = function() {
    width = this.innerWidth;
    height = this.innerHeight;
    document.body.innerHTML = width + 'x' + height; // For demo purposes
}

---

Using jQuery objects it would look like this.

(Resizeable Demo)

var width,height;
$(window).on('load resize', function() {
    width = this.innerWidth; // `this` points to the DOM object, not the jQuery object
    height = this.innerHeight;
    document.body.innerHTML = width + 'x' + height; // For demo purposes
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Try this:

$(window).on("resize",function(){
    console.log($(this).height() + " " + $(this).width());
});

fiddle

Try this

var width = window.outerWidth;
var height = window.outerHeight;

To resize the current window, use

window.resizeTo(width, height);

You can trigger the resize function using:

$( window ).resize(function() {
   //....
});

Hope it helps you

You can use this to detect a change in screen size:

$(window).resize(function() {
  height = window.innerHeight;
  width = window.innerWidth;
  //other code you wish to run on screen size change;
});

This assumes that height and width were declared in a scope that the function has access to. Otherwise make sure to place var before each variable.

本文标签： javascriptGet constant browser height and widthStack Overflow