web-dev-qa-db-fra.com

Définition d'une taille minimale pour une fenêtre minimisée du navigateur

Est-il possible de définir manuellement la taille minimale d'une fenêtre de navigateur sur tous les navigateurs?

javascripthtmlcssbrowsercross-browser
11
Human Being

Tu peux essayer 

body {  min-width:600px; }

Vous obtiendrez une barre de défilement horizontale une fois que la fenêtre aura moins de 600 pixels. Cela ne fonctionnera que dans les navigateurs modernes prenant en charge la propriété CSS min-width.

Je ne pense pas qu'il soit possible d'empêcher l'utilisateur de redimensionner, et cela ne devrait pas l'être! 

19
Gurpreet Singh

Vous devrez utiliser Javascript et créer la fenêtre en question pour que cela fonctionne la plupart du temps, car les navigateurs à onglets ne vous laisseront pas redéfinir la taille de la fenêtre contenant d'autres onglets. Même dans ce cas, certains navigateurs ne vous laisseront pas faire cela.

En utilisant window.open , vous pouvez créer une fenêtre donnée de taille 640 * 480 en spécifiant:

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

Dans la fenêtre, vous pouvez essayer et resizeTo height and width, déclenchés par le gestionnaire d'événements resize, comme suit:

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)

Vous devez prendre en compte le fait que les deux comportements ci-dessus sont controversés et que ce que vous décrivez restreint de manière efficace la liberté de l'utilisateur d'utiliser son navigateur à sa guise. En tant que tel, je ne m'attendrais pas à ce que cela fonctionne partout - mais là où c'est le cas, c'est le code qui vous permettra de le faire.

20
Barney
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
Tito100

Voici ma solution pour garantir la largeur et la hauteur minimales du contenu, ce qui inclut la gestion des dimensions "chrome" de différents navigateurs. Cela ne fonctionne pas avec Firefox, mais je l’ai testé sous Edge et 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
Gabriël Wolmarans