javascript 如何调整浏览器窗口的大小以使内部宽度为特定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10385768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you resize a browser window so that the inner width is a specific value
提问by mrbinky3000
If you are just here to tell me on why resizing a window is a bad idea, obnoxious, and the web-equivalent of nails on a chalk board, then please go away. I am looking for a solution not a lecture. This is to be used in a intranet setting only. Specifically, to debug and then demo responsively designed web sites (sites that use media queries to scale) to clients for review via a web meeting. I want to demo specific break points. This is not to be unleashed on the general public.
如果您只是来告诉我为什么调整窗口大小是个坏主意、令人讨厌，以及在粉笔板上钉钉的网络等价物，那么请走开。我正在寻找解决方案而不是讲座。这仅用于 Intranet 设置。具体来说，调试并演示响应式设计的网站（使用媒体查询来扩展的网站）以通过网络会议向客户进行。我想演示特定的断点。这不应该向公众公开。
Things I already know:
我已经知道的事情：
- You can only resize and position windows opened via javascript, not by the user. (unless they adjust their security settings, which is not an option)
- When you use window's resizeTo() method, the browser is resized to the specified dimensions. The viewport is often significantly smaller (like 30 to 100 pixels smaller on average) However, I want to resize the viewport to a specific size.
- The browser, browser version, platform, some plugins, and various menu's and tool bars will alter the viewport's dimensions. More menus and tool bars means the viewport width is smaller.
- 您只能调整通过 javascript 打开的窗口的大小和位置，而不能由用户调整。（除非他们调整他们的安全设置，这不是一个选项）
- 当您使用窗口的 resizeTo() 方法时，浏览器将调整到指定的尺寸。视口通常要小得多（例如平均小 30 到 100 个像素）但是，我想将视口调整为特定大小。
- 浏览器、浏览器版本、平台、一些插件以及各种菜单和工具栏将改变视口的尺寸。更多的菜单和工具栏意味着视口宽度更小。
Possible Solution:
可能的解决方案：
- Find the browser's width and height
- Find the viewport's width and height
- Determine the difference between the two.
- Adjust the values in my call to resizeTo() accordingly
- 查找浏览器的宽度和高度
- 找到视口的宽度和高度
- 确定两者的区别。
- 相应地调整我对 resizeTo() 调用中的值
I need help with step 1. Everything else I can figure out. I'm also using jQuery and modernizer if that helps.
我需要第 1 步的帮助。我能弄清楚的其他一切。如果有帮助，我也在使用 jQuery 和 Modernizer。
Thanks in advance for your help!
在此先感谢您的帮助！
回答by Bob G
The post is quite old, but here is a concrete implementation for future readers :
这篇文章已经很老了，但这里有一个具体的实现，供未来读者使用：
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)
);
}
};
And if you want to take the scrollbars into account :
如果您想考虑滚动条：
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;
};
Have fun...
玩得开心...
