I examined the window
object in Firebug. window.innerWidth
and window.outerWidth
are both 1230
.
What is the difference between these two values?
I examined the window
object in Firebug. window.innerWidth
and window.outerWidth
are both 1230
.
What is the difference between these two values?
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>
window.innerWidth
and window.outerWidth
is equal !!
Mar 4, 2018 at 12:36
window.innerWidth
and window.outerWidth
will differ if you have zoomed in or out. innerWidth
will show the scaled width of the window, while outerWidth
will not take zooming into account. Suppose you have a window that is 1000px wide unzoomed. Both innerWidth
and outerWidth
will evaluate to 1000. If you zoom to 150% (enlarging the screen content), the innerWidth
will become 667 (1000 / 1.5) and outerWidth
will stay at 1000.
outerwidth
is the width of the responsive viewport while innerwidth
is the width of the window including the dead area outside the responsive viewport but inside the window (observed when dev tools is docked)
Oct 14, 2020 at 12:02
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.