How do you resize a browser window so that the inner width is a specific value

Question

If you are just here to tell me on why resizing a window is a bad idea, obnoxious, and the web-equivalent of nails on a chalk board, then please go away. I am looking for a solution not a lecture. This is to be used in a intranet setting only. Specifically, to debug and then demo responsively designed web sites (sites that use media queries to scale) to clients for review via a web meeting. I want to demo specific break points. This is not to be unleashed on the general public.

Things I already know:

1. You can only resize and position windows opened via javascript, not by the user. (unless they adjust their security settings, which is not an option)
2. When you use window's resizeTo() method, the browser is resized to the specified dimensions. The viewport is often significantly smaller (like 30 to 100 pixels smaller on average) However, I want to resize the viewport to a specific size.
3. The browser, browser version, platform, some plugins, and various menu's and tool bars will alter the viewport's dimensions. More menus and tool bars means the viewport width is smaller.

Possible Solution:

1. Find the browser's width and height
2. Find the viewport's width and height
3. Determine the difference between the two.
4. Adjust the values in my call to resizeTo() accordingly

I need help with step 1. Everything else I can figure out. I'm also using jQuery and modernizer if that helps.

Thanks in advance for your help!

Answer 1

The post is quite old, but here is a concrete implementation for future readers :

var resizeViewPort = function(width, height) {     if (window.outerWidth) {         window.resizeTo(             width + (window.outerWidth - window.innerWidth),             height + (window.outerHeight - window.innerHeight)         );     } else {         window.resizeTo(500, 500);         window.resizeTo(             width + (500 - document.body.offsetWidth),             height + (500 - document.body.offsetHeight)         );     } }; 

And if you want to take the scrollbars into account :

var resizeViewPort = function(width, height) {     var tmp = document.documentElement.style.overflow;     document.documentElement.style.overflow = "scroll";      if (window.outerWidth) {         window.resizeTo(             width + (window.outerWidth - document.documentElement.clientWidth),             height + (window.outerHeight - document.documentElement.clientHeight)         );     } else {         window.resizeTo(500, 500);         window.resizeTo(             width + (500 - document.documentElement.clientWidth),             height + (500 - document.documentElement.clientHeight)         );     }      document.documentElement.style.overflow = tmp; }; 

Have fun...