Browser size

Useful Javascript

How fat is your browser? The browser chrome or skin takes up a certain amount of space, a number of pixels left, right, top and bottom between the outside world and the edge of the page within. The difference between a window's outersize and innersize is the size of the browser window chrome, the skin.

Bits of skin

The horizontal value depends on

The vertical dimension depends on

The script

In this script, two nuisances are combined into one advantage. The handy functions window.resizeTo( X, Y ) and window.open( url, name, 'width=X,height=Y' ) set the outer dimensions of a window, but in Internet Explorer, the most used browser, the Document Object Model only knows the inner size and cannot read these values directly.

So we measure the inner dimensions, resize to those sizes, measure again to note the difference, then change back and output the result:

function windif() {
 var difx, dify, w = getwindow(),
  winx = w.w, winy = w.h;
 window.resizeTo( winx, winy );
 w = getwindow();
 difx = winx - w.w; dify = winy - w.h;
 window.resizeTo( winx + difx, winy + dify );
 return difx + 'px × ' + dify + 'px';
// To actually run the function, click on either of these statements:
window.alert( windif() );/**/
window.status = windif();/**/

Now we know the overall thickness, but still not how much either side...