Resizing browser with JavaScript to test site display at different screen Dimensions

It's handy to be able to see what your site looks like on different devices. Although, of course, the perfect answer is to use the device in question to view it, with the multitude of different devices in use and variable screen dimensions users may set, this is often not possible. A rule-of-thumb solution is to use Javascript to resize your web browser to a particular screen dimension to gauge the success of display.

Note I said rule-of-thumb solution. Many things may effect the display area available such as extra toolbars present and that your site may be viewed in a non-maximized browser window, so it can only be a best-guess at what your viewer will see.

The control below will resize a browser window to specified dimensions. Once viewed, you can resize or maximise the browser window back your preference in the normal manner.

Note that with certain browsers you may see a note informing you that rather than resizing the current window a new window should be opened (Bugzilla: Bug 565541 - Web sites shouldn't be allowed to resize main window ), and this is the reason I've tinkered with the script I have used and passed along for years.

Maybe you too will find it useful. If you would like to script your own, below is the snippet of Javascript which resizes the window.

var windowHeight = value;
var windowWidth = value;
// Replace value with numeric amount

if (navigator.userAgent.indexOf("Firefox")!=-1) {

// If Firefox new window will be opened.

  var position = ',left=0,top=0,';
  var windowOptions = 'resizable=yes,status=yes,menubar=yes,titlebar=yes,toolbar=yes,location=yes,scrollbars=yes';
  var attribs='height=' + windowHeight + ',width=' + windowWidth + position + windowOptions;

  window.open('','',attribs);
}
else {
  self.resizeTo(windowWidth,windowHeight);
}

Tags: Browser, Javascript, resize