Say that you are working on an app that among other things uses a lot of differently sized windows, and their sizes affect the User Experience or comfortable usage of the app.
That means you have to alter the size of the new windows that are generated, or even the one the user is currently working on, if the need arises. How can you do that? Let’s see!
1. Useful knowledge when discussing Window Size
First of all, in order to distinguish between the properties that are used to specify a window’s size you need to know the difference between a Window and a Viewport. While you are already quite familiar with what a window is, you might have not realized that the area the shows the actual content of a website is the viewport.
That means that while a window includes everything pertaining the website together with the browser’s visible features, the viewport is just the content, no toolbars, status or menu bars. At most it includes the horizontal and vertical scrollbars if applicable.
There are three different ways to determine your browser’s window size, according to the browser you’re using, because unfortunate as it is, IE always manages to find a way to thwart our plans in many different matters, including this. There are document.body.offsetWidth and document.body.offsetHeight for Internet Explorer in backward-compatibility mode, document.documentElement.offsetWidth and document.documentElement.offsetHeight for IE in standard mode, and the last but not least (and more widely used, might I add) there is window.innerWidth and window.innerHeight for IE9+ and all the other browsers when determining the viewport’s dimensions and window.outerWidth and window.outerHeight for the window’s ones. Let’s tackle them all one at a time.
2. The usual approach
We mentioned that the most used approach, since most of us use browsers other than earlier versions of IE, is determining a window’s dimensions using the properties outerHeight and outerWidth and in the case of viewports innerHeight and innerWidth. These properties are read-only and are used very simply.
To find out the size of the window and viewport we’re currently using we would use the code like below, divided into an HTML and Javascript part. Take a look at the HTML first:
viewport.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window size </title>
<script rel="javascript" src="viewport.js"></script>
</head>
<body>
<button onclick="showSize()">Show viewport size</button>
<p id="myViewport"></p>
<button onclick="showSize()">Show window size</button>
<p id="myWindow"></p>
</body>
</html>
As you can see we have simply created two buttons that show the sizes of the window and viewport respectively, and additionally we have placed two empty paragraphs, each with a different id, more specifically myViewport and myWindow, which we’ll explain later. Now take a look at the Javascript part of our code:
viewport.js
function showSize() {
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth;
var oh = window.outerHeight;
document.getElementById("myViewport").innerHTML = "Viewport Width: " + w + "
Viewport Height: " + h;
document.getElementById("myWindow").innerHTML = "Window Width: " + ow + "
Window Height: " + oh;
}
What we’ve done here is simply get the values of the height and width in pixels and printed them in the empty paragraphs placed below, using the custom id‘s to address them. Simple right?
3. What about IE?
To find out the dimensions of your window even in the earlier versions of IE we mentioned two ways, one for the backward compatible mode and one for the standard mode IE. The code is pretty easy, though annoying nevertheless. Let’s converge both ways into one, since they technically do the same thing under almost the same conditions. Take a look at the Javascript code below:
index.js
var w = 630, h = 460;
if (document.body && document.body.offsetWidth) {
w = document.body.offsetWidth;
h = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
w = document.documentElement.offsetWidth;
h = document.documentElement.offsetHeight;
}
document.writeln('Window width = '+w);
document.writeln('Window height = '+h);
What we’ve done here is very simple: Before determining the window’s size we first run a conditional to know which mode we’re working on, whether it’s the standard one or the backwards-compatible. The condition for the backwards-compatible mode IE would be document.body && document.body.offsetWidth and even though you can already guess by yourself the one for the standard mode, I’ll still say it: document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth. Then you just have to visualize the results, which is what our last two lines of code do.
4. Download the source code
This was an example of Window Size in Javascript.
