Question

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

我已经知道的事情：

您只能调整大小并定位通过javascript打开的窗口，而不是用户。（除非他们调整安全设置，这不是一个选项）
使用window的resizeTo（）方法时，浏览器会调整为指定的尺寸。视口通常要小得多（平均缩小30到100个像素）但是，我想将视口大小调整为特定大小。
浏览器，浏览器版本，平台，一些插件以及各种菜单和工具栏将改变视口的尺寸。更多菜单和工具栏表示视口宽度更小。

可能的解决方案：

查找浏览器的宽度和高度
找到视口的宽度和身高
确定两者之间的差异。
相应调整resizeTo（）调用中的值

我需要步骤1的帮助。我能想到的其他一切。如果有帮助，我也会使用jQuery和现代化器。

提前感谢您的帮助！

Answer 1

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

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

玩得开心......

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

1 个答案: