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

Question

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

我已经知道的事情:

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

可能解决方案

1. 找到浏览器的宽度和高度
2. 找到视口的宽度和高度
3. 确定两者之间的差异.
4. 相应地调整我调用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;
};

玩得开心...