Come ridimensionare una finestra del browser in modo che la larghezza interna sia un valore specifico

Question

Se sei qui solo per dirmi perché ridimensionare una finestra è una cattiva idea, odioso, e l'equivalente web di chiodi su una lavagna allora per favore vai via. Sto cercando una soluzione, non una conferenza. Questo deve essere utilizzato solo in una rete Intranet. In particolare, per eseguire il debug e quindi demo di siti Web progettati responsabilmente (siti che utilizzano le query multimediali in scala) ai clienti per la revisione tramite una riunione Web. Voglio dimostrare punti di rottura specifici. Questo non deve essere scatenato sul pubblico in generale.

Le cose che mi sanno già:

1. Si può solo ridimensionare e finestre posizione aperta tramite javascript, non da parte dell'utente. (a meno che non modificino le impostazioni di sicurezza, che non è un'opzione)
2. Quando si utilizza il metodo resizeTo() della finestra, il browser viene ridimensionato alle dimensioni specificate. Il viewport è spesso molto più piccolo (come in media 30-100 pixel in meno) Tuttavia, voglio ridimensionare la finestra su una dimensione specifica.
3. Il browser, la versione del browser, la piattaforma, alcuni plugin e vari menu e barre degli strumenti modificano le dimensioni della finestra. Più menu e barre degli strumenti significano che la larghezza della finestra è più piccola.

Soluzione possibile

1. Trova larghezza e l'altezza del browser
2. Trova la larghezza della finestra e altezza
3. Determinare la differenza tra i due.
4. regolare i valori della mia chiamata a resizeTo() di conseguenza

Ho bisogno di aiuto con la fase 1. Tutto il resto riesco a capire. Sto anche usando jQuery e il modernizzatore se questo aiuta.

Grazie in anticipo per il vostro aiuto!

Answer 1

Il post è piuttosto vecchio, ma qui è un'implementazione concreta per i lettori futuri:

var resizeViewPort = function(width, height) { 
    if (window.outerWidth) { 
     window.resizeTo(
      width + (window.outerWidth - window.innerWidth), 
      height + (window.outerHeight - window.innerHeight) 
     ); 
    } else { 
     window.resizeTo(500, 500); 
     window.resizeTo(
      width + (500 - document.body.offsetWidth), 
      height + (500 - document.body.offsetHeight) 
     ); 
    } 
}; 

E se si vuole prendere le barre di scorrimento in considerazione:

var resizeViewPort = function(width, height) { 
    var tmp = document.documentElement.style.overflow; 
    document.documentElement.style.overflow = "scroll"; 

    if (window.outerWidth) { 
     window.resizeTo(
      width + (window.outerWidth - document.documentElement.clientWidth), 
      height + (window.outerHeight - document.documentElement.clientHeight) 
     ); 
    } else { 
     window.resizeTo(500, 500); 
     window.resizeTo(
      width + (500 - document.documentElement.clientWidth), 
      height + (500 - document.documentElement.clientHeight) 
     ); 
    } 

    document.documentElement.style.overflow = tmp; 
}; 

Buon divertimento ...