设置窗口最小化浏览器的最小大小限制?

时间:2013-04-23 15:56:06

标签: javascript html css browser cross-browser

有没有办法在所有浏览器中手动设置浏览器窗口的最小大小?

4 个答案:

答案 0 :(得分:22)

你必须使用Javascript并创建有问题的窗口,以便大多数时间都可以使用,因为选项卡式的bowsers不会让你重新定义包含其他标签的窗口的大小。即便如此,有些浏览器也不允许你这样做。

使用window.open,您可以通过指定:

创建一个大小为640 * 480的给定窗口
window.open('http://www.your.url/','yourWindowsName','width=640,height=480');

在窗口中,您可以尝试resizeToresize事件处理程序触发的{{3}}高度和宽度,如下所示:

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)

您应该考虑到上述两种行为都是有争议的,而您所描述的内容有效地限制了用户在他们认为合适时使用浏览器的自由。因此,我不希望这在任何地方都能正常工作 - 但在它所在的地方,这是允许你这样做的代码。

答案 1 :(得分:20)

你可以尝试

body {  min-width:600px; }

一旦视口小于600px,您将获得一个水平滚动条。这仅适用于支持min-width CSS属性的现代浏览器。

我认为不能限制用户调整大小,它不应该!

答案 2 :(得分:1)

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)

答案 3 :(得分:0)

这是我确保实际最小内容宽度和高度的解决方案,其中包括处理不同浏览器的“chrome”维度。这不适用于Firefox,但我已经在Edge和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);