是否可以使用javascript调整浏览器窗口大小？ [复制]答案

【问题标题】：Is it possible to resize browser window size using javascript? [duplicate]是否可以使用javascript调整浏览器窗口大小？ [复制]
【发布时间】：2017-05-11 13:16:53
【问题描述】：

我想使用 Javascript 调整浏览器窗口的大小来测试我的响应式网页设计功能。但我没有找到任何相同的选项。

我发现，我们可以修改新弹出窗口的窗口大小，如下所示：

<body>

<p>Open a new window, and resize the width and height to 500px:</p>

<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>

<script>
var myWindow;

function openWin() {
    myWindow = window.open("", "", "width=100, height=100");
 }

function resizeWin() {
    myWindow.resizeTo(250, 250);
    myWindow.focus();
}
</script>

</body>

我使用以下 css 代码定义了一些响应行为：

@media screen and (max-width: 500px){
     //style changes
}

我们可以调整启动页面的浏览器窗口的大小吗？还是不可能？

【问题讨论】：

这可以帮助你stackoverflow.com/questions/7022787/…
我已经提到了 resizeTo() 方法的使用。这对我来说没有用。 :(

标签： javascript html css

【解决方案1】：

有两个选项可以实现响应式布局结构：

通过使用 javascript..

    function  ResponsiveLayout() {

        if (screen.width <= 1440) {

            $('#content').addClass("pipeline1");

        }
        else if (screen.width > 1440 && screen.width <= 1600) {
            $('#content').addClass("pipeline2");
        }
        else if (screen.width > 1600) {
            $('#content').addClass("pipeline3");
        }
    };ResponsiveLayout()

通过使用 css3 媒体查询：

@media (min-width: 1200px){css attrabutes}
@media (max-width: 1199px) and (min-width: 981px){css attrabutes}
@media (max-width: 980px) and (min-width: 641px){css attrabutes}
@media (max-width: 640px) and (min-width: 481px){css attrabutes}
@media (max-width: 480px) and (min-width: 321px){css attrabutes}
@media (max-width: 320px){css attrabutes}

专业的媒体查询会是更好的选择，但我们可以使用 javascript 访问有限的 css 文件或内联 css -:)

【讨论】：

作者想用js调整浏览器窗口的大小，而不是让他的布局响应

【解决方案2】：

您可能可以使用resizeBy/resizeTo，但您为什么不想使用 Chrome 内置测试器？您可以打开开发者控制台cmd/ctrl + alt + I 并单击Device Toolbar 或cmd/ctrl + shift + M 并使用预定义的模板调整屏幕大小或创建自己的模板

更新

对于自动化测试，有几种方法可以调整它。哪个运行时正在运行您的 Jasmine 测试？对于 PhantomJS，您可以使用

var webPage = require('webpage');
var page = webPage.create();

page.viewportSize = {
  width: 480,
  height: 800
};

更多信息here

【讨论】：

我们正在使用 Jasmine 框架来测试功能。在那我必须编码窗口大小的变化。

【解决方案3】：

要调整窗口大小，您只需这样做：

window.resizeTo(width, height);

【讨论】：

复制粘贴stackoverflow.com/questions/7022787/…