Menu
I examined the window object in Firebug. window.innerWidth and window.outerWidth are both 1230.
What is the difference between these two values?
406
innerWidth / innerHeight - includes padding but not border. outerWidth / outerHeight - includes padding, border, and optionally margin. height / width - element height (no padding, no margin, no border)
Window. outerWidth read-only property returns the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.
window. innerWidth/innerHeight includes the scrollbar. In most cases, we need the available window width in order to draw or position something within scrollbars (if there are any), so we should use documentElement.
Usage notesBoth innerHeight and innerWidth are available on any window or any object that behaves like a window, such as a tab or frame.
From Mozilla Developer Network:
window.outerWidth
window.outerWidth gets the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.
and
window.innerWidth
Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.
This is ostensibly how they work. A test page, however, shows they are both the same no matter how I resize them in Firefox 14.0.1 on Ubuntu 12.04. In Chromium, they return numbers that are 8 pixels different. Doing a bit of dead reckoning, it appears the window chrome on that particular app is about 4 pixels on the left side and 4 pixels on the right side and that this difference is being correctly picked up in that browser.
Code for the test page I used:
<!DOCTYPE html> <html lang="en"> <head> <title>12066093</title> <meta charset="utf-8"> </head> <body> <div style="width:2000px; height: 2000px;">hi</div> <script type="text/javascript"> alert("window.innerWidth: " + window.innerWidth + "\nwindow.outerWidth: " + window.outerWidth); </script> </body> </html> Check the Mozilla reference for window.innerWidth and window.outerWidth. If your operating system/window manager has them, window.outerWidth includes the window borders, resizing handles, and sidebars.
Try opening the bookmarks or history sidebar, then trying that again in Firebug.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
