Resizing browser with JavaScript to test site display at different screen Dimensions
Page: prev. | 1 | next
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.
Resize Browser Window
This code will not work with Google Chrome as resizing windows with Javascript is convoluted as tabbed windows are not resized and popup windows are blocked by default: Chromium Issue 2091—window.resizeTo() doesn’t have any effect (code.google.com). With Mozilla Firefox, the code snippet directs a new window will be opened and resized instead for that browser: Bugzilla: Bug 565541—Web sites shouldn’t be allowed to resize main window (bugzilla.mozilla.org). With Microsoft Internet Explorer, a new window will be opened and resized by default and with Apple Safai, the window will only be resized if it is the top level (first) tab.
Updated 14th October 2017
As well as Chrome itself, does not work with any Chromium based browser such as Opera for the same reasons, nor with Microsoft Edge’s EdgeHTML rendering engine either so, yeah, pretty much Firefox and derivatives only, and not for much longer with regards FF is adopting Chromium in Nov. 2017 with v. 57 (Latest picks 12th Apr, 2016).
The code did stop working completely for a while, but that was due to me removing a defined Javascript function that I though was redundant but which was not—oops.
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, use window.open to open a new window
- 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(document.URL,'new window name',attribs);
- }
- else {
- self.resizeTo(windowWidth,windowHeight);
- }
Page: prev. | 1 | next