What is the difference between window.innerWidth window.outerWidth?

Question

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>

Leave a Comment Cancel reply