Установка минимального ограничения размера для минимизации окна браузера?

есть ли способ, чтобы вручную задать минимальный размер окна браузера, во всех браузерах?

10
browser cross-browser css html javascript

4 ответов

вы можете попробовать 

body {  min-width:600px; }

вы получите горизонтальную полосу прокрутки, как только видовое окно получит меньше 600px. Это будет работать только в современных браузерах, поддерживающих свойство CSS минимальной ширины.

Я не думаю, что можно ограничить пользователя от изменения размера, и это не должно быть!

19

вам нужно будет использовать 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)

вы должны учитывать, что оба поведения выше являются спорными, и то, что вы описываете, эффективно ограничивает свободу пользователя использовать свой браузер по своему усмотрению. Таким образом, я бы не ожидал, что это будет работать везде, но в местах, где это происходит, это код, который позволит вам это сделать.

19
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)
1

вот мое решение для обеспечения фактической минимальной ширины и высоты контента, которое включает в себя работу с различными размерами браузера "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);
0