如何调整浏览器窗口的大小以使内部宽度为特定值 [英] How do you resize a browser window so that the inner width is a specific value

问题描述

如果你只是在这里告诉我为什么调整窗口的大小是一个坏主意，令人讨厌，以及粉笔板上的指甲网，那么请离开。我正在寻找一个解决方案，而不是一个讲座。这仅用于Intranet设置。具体来说，调试然后演示响应式设计的网站（使用媒体查询扩展的网站）给客户通过网络会议进行审查。我想演示特定的断点。这不是在公众面前释放的。

If you are just here to tell me on why resizing a window is a bad idea, obnoxious, and the web-equivalent of nails on a chalk board, then please go away. I am looking for a solution not a lecture. This is to be used in a intranet setting only. Specifically, to debug and then demo responsively designed web sites (sites that use media queries to scale) to clients for review via a web meeting. I want to demo specific break points. This is not to be unleashed on the general public.

我已经知道的事情：

1. 您只能调整大小并定位通过javascript打开的窗口，而不是用户。 （除非他们调整安全设置，这不是一个选项）


2. 当您使用window的resizeTo（）方法时，浏览器会调整为指定的尺寸。视口通常要小得多（平均缩小30到100个像素）但是，我想将视口大小调整为特定大小。


3. 浏览器，浏览器版本，平台，一些插件，各种菜单和工具栏将改变视口的尺寸。更多菜单和工具栏意味着视口宽度更小。

可能的解决方案：

1. 查找浏览器的宽度和高度


2. 查找视口宽度和
   高度


3. 确定两者之间的差异。


4. 相应调整resizeTo（）调用中的值

1. Find the browser's width and height
2. Find the viewport's width and height
3. Determine the difference between the two.
4. Adjust the values in my call to resizeTo() accordingly

我需要步骤1的帮助。其他我能弄明白的东西。如果有帮助，我也会使用jQuery和现代化器。

I need help with step 1. Everything else I can figure out. I'm also using jQuery and modernizer if that helps.

提前感谢您的帮助！

推荐答案

这篇文章很老了，但这是未来读者的具体实现：

The post is quite old, but here is a concrete implementation for future readers :

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

如果你想把滚动条考虑在内：

And if you want to take the scrollbars into account :

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

玩得开心......

Have fun...

这篇关于如何调整浏览器窗口的大小以使内部宽度为特定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！