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

Question

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

23

如果您只是想告诉我为什么调整窗口大小是一个糟糕的主意，讨厌，并且相当于在黑板上刮指甲，那么请离开。我正在寻找解决方案而不是演讲。这将仅用于公司内部网络环境中，具体来说，是为了调试并演示对客户进行网页会议审查的响应式设计网站（使用媒体查询进行缩放）。我想演示特定的断点。这不会被公众所使用。

我已知道以下事项：

1. 只能通过 JavaScript 打开和定位窗口，不能由用户操作（除非他们调整安全设置，这不是一个选项）。 2. 当使用窗口的 resizeTo() 方法时，浏览器会被调整到指定的尺寸。视口通常会小得多（平均小30至100像素）。但我想调整视口到特定大小。 3. 浏览器、浏览器版本、平台、某些插件以及各种菜单和工具栏都会改变视口的尺寸。菜单和工具栏越多，视口宽度就越小。

可能的解决方案：

1. 找出浏览器的宽度和高度。 2. 找出视口的宽度和高度。 3. 确定两者之间的差异。 4. 相应地调整我的 resizeTo() 调用中的值。

我需要帮助的是步骤1。其他一切都可以自己解决。我还在使用 jQuery 和 Modernizer，如果这有帮助的话。感谢您提前的帮助！

- mrbinky3000

1

http://www.quirksmode.org/dom/w3c_cssom.html - AlienWebguy

你在第四步中可能会遇到的唯一问题是确保浏览器已经启用了弹出窗口以在新窗口中打开，并且你可以调整其大小。 - epascarello

我喜欢这个的前两句话！ - dewd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bob G · Accepted Answer

这篇文章已经很老了，但以下是一个具体的实现方法，供未来读者参考：

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

玩得开心...