Do you have something that you plan on displaying in your browser that is a specific size? Want to resize the browser viewing area to exactly match it? Want to do all this in a popup window? While, yes, resizing browsers is not a good usability idea, I have come up with a (I think) bulletproof way to size the browser viewport to it's inside dimensions.

 

Now, the problem in the past has, not surprisingly, been IE. It has no way of determining outerWidth/outerHeight values, and needless to say every browser is totally different. Brother in arms Quirksmode has put together a definitive list of everything viewport related. He has put together a fantastic "get inner dimensions" function that we will need:

 

function GetInnerSize () {
	var x,y;
	if (self.innerHeight) // all except Explorer
	{
		x = self.innerWidth;
		y = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight)
		// Explorer 6 Strict Mode
	{
		x = document.documentElement.clientWidth;
		y = document.documentElement.clientHeight;
	}
	else if (document.body) // other Explorers
	{
		x = document.body.clientWidth;
		y = document.body.clientHeight;
	}
	return [x,y];
}
				

Now, to overcome IE's limitations, and to ameliorate everyone else, we're going to do things a little differently than past solutions. Since we won't know the outer dimensions in IE, we are going to need a yardstick to figure things out. Luckily, just like Archimedes, we're going to use displacement to do this.

 

One thing that every browser DOES support is screen.availHeight and screen.availWidth. Nice. OK, so what we are going to do is make the browser the biggest it can be, which is to say the entire size of the available screen resolution so that we will also know now how big the browser is. Then we take an inner dimension snapshot, and presto! We have the offset between the viewable area of the browser, and it's outer frame size. A little math magic is all that is left and we are going to resize and position it back in place. Here's the function for your enjoyment:

 

function ResizeToInner (w, h, x, y) {
	// make sure we have a final x/y value
	// pick one or the other windows value, not both
	if (x==undefined) x = window.screenLeft || window.screenX;
	if (y==undefined) y = window.screenTop || window.screenY;
	// for now, move the window to the top left
	// then resize to the maximum viewable dimension possible
	window.moveTo(0,0);
	window.resizeTo(screen.availWidth,screen.availHeight);
	// now that we have set the browser to it's biggest possible size
	// get the inner dimensions.  the offset is the difference.
	var inner = GetInnerSize();
	var ox = screen.availWidth-inner[0];
	var oy = screen.availHeight-inner[1];
	// now that we have an offset value, size the browser
	// and position it
	window.resizeTo(w+ox, h+oy);
	window.moveTo(x,y);
}
				

 

As a little ancillary benefit, i added in the option to set the x and y position of the browser frame as well, so you can size it and position it in one fell swoop.