Cómo cambiar el tamaño de una ventana del navegador para que el ancho interno sea un valor específico

Question

Si está aquí para decirme por qué cambiar el tamaño de una ventana es una mala idea, desagradable, y el equivalente web de las uñas en una pizarra , por favor, vete. Estoy buscando una solución, no una conferencia. Esto se debe usar solo en una configuración de intranet. Específicamente, para depurar y luego hacer demostraciones de sitios web diseñados con capacidad de respuesta (sitios que usan consultas de medios para escalar) a los clientes para su revisión a través de una reunión web. Quiero demostrar puntos de ruptura específicos. Esto no debe desatarse en el público en general.

cosas que ya saben:

1. Sólo puede cambiar el tamaño y ventanas posición abierta a través de JavaScript, no por el usuario. (a menos que ajusten sus configuraciones de seguridad, que no es una opción)
2. Cuando usa el método resizeTo() de la ventana, el navegador se redimensiona a las dimensiones especificadas. La ventana gráfica es a menudo significativamente más pequeña (como 30 a 100 píxeles más pequeña en promedio). Sin embargo, quiero cambiar el tamaño de la ventana gráfica a un tamaño específico.
3. El navegador, la versión del navegador, la plataforma, algunos complementos y varios menús y barras de herramientas modificarán las dimensiones de la ventana gráfica. Más menús y barras de herramientas significa que el ancho de la ventana gráfica es más pequeño.

Posible solución:

1. Encuentra anchura y la altura del navegador
2. Encuentra el ancho de la ventana gráfica y altura
3. determinar la diferencia entre los dos.
4. ajustar los valores en mi llamada a resizeTo() En consecuencia

Necesito ayuda con el paso 1. Todo lo demás que puedo imaginar. También estoy usando jQuery y modernizador si eso ayuda.

Gracias de antemano por su ayuda!

Answer 1

El puesto es bastante antiguo, pero aquí es una aplicación concreta para los futuros lectores:

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) 
     ); 
    } 
}; 

Y si usted quiere tomar las barras de desplazamiento en cuenta:

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; 
}; 

Diviértete ...