2013-04-23 222 views
10

反正有人工的所有浏览器支持设置窗口最小化的最小尺寸是多少?设置窗口最小化浏览器的最小大小限制?

不要犹豫,问的问题,还可以编辑的问题。

好的答案是肯定赞赏的。

+3

如果你的意思是限制浏览器窗口,然后确定**没有**(*为好的理由*)。如果你的意思是实际的网站,那么'最小宽度'是你的朋友.. – 2013-04-23 16:01:01

+2

@ GabyakaG.Petrioli _“definitive ** no **”_绝对不正确 - [我的答案](http://stackoverflow.com/a/16174183/356541)提供了一个可在Chrome中使用的解决方案。我谦恭地建议任何人upvoting以上想想也downvoting我的回答,为子孙后代着想的评论的思考! – Barney 2013-04-24 13:52:31

+0

@Barney OP指出“***为所有浏览器支持***”,并且你的解决方案只有在通过'window.open'打开窗口时才有效。 Of'course您的答案不应该downvoted,因为它提供了某些方案的解决方案,是一个很好的补充问题/答案为未来的参考.. – 2013-04-24 13:58:20

回答

20

您可以尝试

body { min-width:600px; } 

你会得到一个水平滚动条,一旦获得视小于600px的。这只适用于支持最小宽度CSS属性的现代浏览器。

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

+1

您可以从技术上限制用户调整大小(请参阅[我的答案](http://stackoverflow.com/a/16174183/356541)),尽管我同意您的意见,您不应该能够。 – Barney 2013-04-24 13:54:01

18

你将不得不使用Javascript和创建有问题的窗口,这个工作的大部分时间,因为标签bowsers不会让你重新定义包含其他选项卡窗口的大小。即使如此,一些浏览器也不会让你这样做。

使用window.open,您可以通过指定让尺寸640 * 480的给定的窗口:

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

在窗口内你可以尝试resizeTo高度和宽度由类似下面的resize事件处理程序触发:

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

+1为您的答案... – 2013-04-24 14:40:11

2
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) 
0

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