javascript - 如何调整浏览器窗口的大小以使内部宽度为特定值

Question

如果您只是来告诉我为什么调整窗口大小是一个坏主意、令人讨厌，并且在网络上相当于粉笔板上的钉子，那么请走开。我正在寻找解决方案而不是讲座。这仅用于 Intranet 设置。具体来说，调试并演示响应式设计的网站(使用媒体查询进行扩展的网站)，以供客户通过网络 session 进行审查。我想演示特定的断点。这不是向公众释放的。

我已经知道的事情:

您只能调整通过 javascript 打开的窗口的大小和位置，而不能由用户调整。 (除非他们调整了他们的安全设置，这不是一个选项)

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

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

可能的解决方案:

查找浏览器的宽高

找到视口(viewport)的宽度和
高度

确定两者的区别。

相应地调整我对 resizeTo() 的调用中的值

我需要第 1 步的帮助。我能弄清楚的其他一切。如果有帮助的话，我也在使用 jQuery 和 Modernizer。

在此先感谢您的帮助!

Answer 1

这篇文章已经很老了，但这里有一个供 future 读者使用的具体实现:

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

如果你想考虑滚动条:

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

玩得开心...