Setting minimum size limit for a window minimization of browser?

Question

Is there a way to manually set the minimum size of a browser window across all browsers?

Solution 1

You can try

body {  min-width:600px; }

You will get a horizontal scrollbar once the viewport gets less than 600px. This will work in only modern browsers supporting min-width CSS property.

I don't think it is possible to restrict user from resizing, and it shouldn't be!

Solution 2

You'll have to use Javascript and create the window in question for this to work most of the time, since tabbed bowsers won't let you redefine the size of the window containing other tabs. Even then, some browsers won't let you do this.

Using window.open, you can make a given window of size 640 * 480 by specifying:

window.open('http://www.your.url/','yourWindowsName','width=640,height=480');

Within the window you can try and resizeTo height and width triggered by the resize event handler like the following:

function resizeToMinimum(){
  var minimum    = [640, 480];
  var current    = [window.outerWidth, window.outerHeight];
  var restricted = [];
  var i          = 2;

  while(i-- > 0){
    restricted[i] = minimum[i] > current[i] ? minimum[i] : current[i];
  }

  window.resizeTo(current[0], current[1]);
}

window.addEventListener('resize', resizeToMinimum, false)

You should take into account that both behaviours above are contentious, and what you're describing effectively restricts the freedom of the user to use their browser as they see fit. As such, I wouldn't expect this to work everywhere — but in places where it does, this is the code that will allow you to do so.

Solution 3

function resizeToMinimum(w,h){
    w=w>window.outerWidth?w:window.outerWidth;
    h=h>window.outerHeight?h:window.outerHeight;
    window.resizeTo(w, h);
};
window.addEventListener('resize', function(){resizeToMinimum(100,100)}, false)

Solution 4

Here's my solution for ensuring actual minimum content width and height, which includes dealing with different browser's "chrome" dimensions. This doesn't work with Firefox, but I've tested it in Edge and Chrome.

function ensureMinimumWindowSize(width, height) {
    var tooThin = (width > window.innerWidth);
    var tooShort = (height > window.innerHeight);

    if (tooThin || tooShort) {
        var deltaWidth = window.outerWidth - window.innerWidth;
        var deltaHeight = window.outerHeight - window.innerHeight;

        width = tooThin ? width + deltaWidth : window.outerWidth;
        height = tooShort ? height + deltaHeight : window.outerHeight;

        // Edge not reporting window outer size correctly
        if (/Edge/i.test(navigator.userAgent)) {
            width -= 16;
            height -= 8;
        }

        window.resizeTo(width, height);
    }
}

var resizeTimer;
window.addEventListener('resize', function(event) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
        ensureMinimumWindowSize(<width>,<height>);
    }, 250);
}, false);

View more solutions

Comments

[Barney]

You can technically restrict users from resizing (see my answer), although I'd agree with your opinion that you shouldn't be able to.

[dougajmcdonald]

This doesn't seem to work for me in Chrome (jsbin - jsbin.com/nuzemogaxa/edit?html,css,output )

[Joehat]

Could someone please explain to me this line while(i-- > 0){ restricted[i] = minimum[i] > current[i] ? minimum[i] : current[i]; } I don't understand the meaning of-- >; ? nor : and I couldn't find it online

[Barney]

i-- is a postfix decrement operation; > is greater than; and x ? y : z is a ternary operation! Sorry for lack of elaboration but the links should clarify!

[Neel]

Should this say window.resizeTo(restricted[0], restricted[1]);?

[Noman_1]

I would just note the following: "It's not possible to resize a window or tab that wasn’t created by window.open(). It's also not possible to resize when the window has multiple tabs". Src: developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo