22

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

我已经知道的事情：

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

可能的解决方案：

  1. 查找浏览器的宽度和高度
  2. 查找视口的宽度和高度
  3. 确定两者的区别。
  4. 相应地调整我对 resizeTo() 的调用中的值

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

在此先感谢您的帮助！

4

1 回答 1

26

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

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

玩得开心...

于 2013-03-08T14:41:50.103 回答