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?

Answer 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!

Answer 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.

Answer 3

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);

Answer 4

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)