validar - saber ancho pantalla javascript

¿Cómo redimensiona una ventana del navegador para que el ancho interno sea un valor específico?

Question

Si solo está aquí para decirme por qué cambiar el tamaño de una ventana es una mala idea, desagradable y el equivalente en la web de clavos en una pizarra, por favor, váyase. Estoy buscando una solución, no una conferencia. Esto se debe utilizar solo en una configuración de intranet. Específicamente, para depurar y luego hacer demostraciones de sitios web diseñados de forma responsiva (sitios que utilizan consultas de medios para escalar) para que los clientes los revisen mediante una reunión web. Quiero demostrar puntos de ruptura específicos. Esto no debe ser desatado en el público en general.

Cosas que ya sé:

1. Solo puede cambiar el tamaño y colocar las ventanas abiertas a través de javascript, no por el usuario. (A menos que ajusten su configuración de seguridad, que no es una opción)
2. Cuando utiliza el método resizeTo () de la ventana, el navegador cambia de tamaño a las dimensiones especificadas. La ventana gráfica suele ser significativamente más pequeña (como de 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 alterará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.

Solución posible:

1. Encuentra el ancho y la altura del navegador.
2. Encuentra el ancho y la altura de la ventana gráfica.
3. Determine 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 averiguar. También estoy usando jQuery y modernizador si eso ayuda.

¡Gracias de antemano por tu ayuda!

Answer 1

La publicación es bastante antigua, pero aquí hay una implementación concreta para 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 quieres tener en cuenta las barras de desplazamiento:

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

Que te diviertas...